Web页面插码
概述最近在忙一些项目,同时也在学习Vue.js和Go开发,发现Vue.js的组件封装功能真的太强大了,可以很快并且便捷的完成页面的开发,不需要去考虑那么多的样式和排版,直接引用社区大神们封装完成的样例模板,已经很好地满足我对前端开发的需求了。手上有些项目的,包括zabbix这些前端已经写得差不多的产品或者项目,想要在这个交互前端上面增加一些按钮或者报表,来辅助用户更好地完成页面的交互,总不可能去推
·
概述
- 最近在忙一些项目,同时也在学习Vue.js和Go开发,发现Vue.js的组件封装功能真的太强大了,可以很快并且便捷的完成页面的开发,不需要去考虑那么多的样式和排版,直接引用社区大神们封装完成的样例模板,已经很好地满足我对前端开发的需求了。
- 手上有些项目的,包括zabbix这些前端已经写得差不多的产品或者项目,想要在这个交互前端上面增加一些按钮或者报表,来辅助用户更好地完成页面的交互,总不可能去推倒重来,所以这里我用了页面插码的方式来进行功能的完善。
原理
- 我们知道,无论是jsp或者php写的前端代码,本质上都是需要后端进行渲染后,生成浏览器能够识别的html语言才能展示到给用户进行查看。所以,我们在这个渲染页面里面加入我们的自己的vue组件,就可以达到在不侵入原有的代码上,增加一些功能按钮或者视图等。
插入代码
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css">
<!-- 引入脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<div id="app">
<vxe-button @click="businessShow = !businessShow">新增业务系统</vxe-button>
<vxe-modal v-model="businessShow" width="600" title="新增业务系统" show-footer>
<template v-slot>
<vxe-form :data="formData" @submit="addBusiness" @reset="resetBusiness">
<vxe-form-item title="名称" field="name">
<template v-slot>
<vxe-input v-model="formData.name" placeholder="请输入业务系统名称" clearable></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item>
<template v-slot>
<vxe-button type="submit" status="primary">增加</vxe-button>
<vxe-button type="reset">重置</vxe-button>
</template>
</vxe-form-item>
</vxe-form>
</template>
</vxe-modal>
</div>
<script>
var v = new Vue({
el: "#app",
data: {
businessShow: false,
formData: {}
},
methods: {
addBusiness: function () {
console.log(this.formData.name)
},
resetBusiness:function () {
this.formData.name = ""
console.log("reset")
}
}
}
)
</script>
- 这是一段vue的演示代码,只要插入到对应的渲染页面就可以实现一个按钮弹框功能,同理,我们可以利用echart.js来更好地展示我们的数据。
效果
- 在这个页面里面多了一个新增业务系统的按钮,点击可以弹出以下编辑内容。
更多推荐
已为社区贡献2条内容
所有评论(0)