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