vue实现模态框的通用写法推荐
在看了element组件的源码后发现,所有模态框其实实现方法都差不多,主要用到了vue在组件化上的双向绑定。代码:
<!--查看槽点对话框--> <template lang="html"> <transition name="el-fade-in-linear"> <div draggable="true" @drag="mouseDrag" @dragend="mouseDragend" :style="dialogStyle" class="g-dialog-wrapper" v-show="myVisible"> <div class="g-dialog-header"> <div class="left"> 模态框 </div> <div class="right"> <i class="g-times-icon fa fa-times" @click="myVisible=false" aria-hidden="true"></i> </div> </div> <div class="g-dialog-container"> </div> </div> </transition> </template> <script> export default { props: { visible: Boolean }, created() { }, data() { return { myVisible: this.visible, }, computed: {}, methods: { }, components: {}, watch: { myVisible: function (val) { this.$emit('update:visible', val) }, visible: function (val) { this.myVisible = val } } } </script> <style lang="css" scoped> </style>
上面代码主要的部分是watch里面的代码,实现监听数据变化,及时更新。所以在使用的时候就很方便了,在component注册组件之后:
<g-key-dialog :visible.sync="keyDialogVisible"></g-key-dialog>
注:这里必须使用sync,要不是无法双向绑定的
以上这篇vue实现模态框的通用写法推荐就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
您可能感兴趣的文章:
- Vue.js弹出模态框组件开发的示例代码
- 利用vue实现模态框组件
赞 (0)