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，要不是无法双向绑定的