封装element的dialog

因为项目需要，好多页面都需要一样的文件导入弹出框。为了以后的方便使用，，，所以就你懂的~

<template>
  <!--- .sync为了同步数据 ---->
  <el-dialog
    :title="title"
    :visible.sync="openCardDialog"    
    width="50%"
  >
  </el-dialog>
</template>
<script>
  export default {
	  props: {
	    visible: {
	      type: Boolean,
	      default: false
	    }
	  },
	  data() {
	    return {
	      title: '导入数据',
	      active: 1
	    }
	  },
	  computed: {
	    // 通过计算属性绑定组件的openCardDialog和传值的visible，子组件的openCardDialog改变也同样修改到父组件中的值
	    openCardDialog: {
	      get() {
	        return this.visible
	      },
	      set(val) {
	        // openCardDialog改变的时候通知父组件
	        this.$emit('update:visible', val)
	        // 使用update更新属性值，并且在父组件中使用.sync就可以同步更新父组件数据
	      }
	    }
	  }
	}
</script>

这一次dialog的封装对我来说新奇的是通过计算属性来控制封装的弹窗的显示隐藏

条件因素：

1. vue2.0
2. element：2.15.5
3. vscode