在看了element组件的源码后发现，所有模态框其实实现方法都差不多，主要用到了vue在组件化上的双向绑定。代码：
<!--查看槽点对话框--> <template lang="html"> <transition> <div draggable="true" @drag="mouseDrag" @dragend="mouseDragend" :style="dialogStyle" v-show="myVisible"> <div> <div> 模态框 </div> <div> <i @click="myVisible=false" aria-hidden="true"></i> </div> </div> <div> </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实现模态框的通用写法推荐就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: