vue子组件弹窗 el-dialog

弹窗

在vue中结合elementui.在父组件中通过点击事件，控制子组件弹窗显示

1. 将父组件的值通过props的方式传递给子组件弹窗
2. 子组件通过computed的方式来获取值和设置新值，在set中调用$emit(‘update:porp’)方法
3. 整个过程通过.sync来完成数据的双向流通

父组件

<template>
    <div class="rightsContainer">
        <el-button size="small" @click="showDialog = !showDialog">显示弹窗</el-button>
        <cardCustomRightsDialog :visible.sync="showDialog"></cardCustomRightsDialog>
    </div>
</template>
<script>
export default {
  components: {
    cardCustomRightsDialog: () => import('./cardCustomRightsDialog')
  },
  data () {
    return {
      showDialog: false
    }
  }
}
</script>

子组件弹窗

<template>
    <div>
        <el-dialog
            :visible.sync="dialogVisiable"
            title="自定义权限"
        >

        </el-dialog>
    </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialogVisiable: {
      get () {
        return this.visible
      },
      set (val) {
        console.log(val)
        this.$emit('update:visible', val)
      }
    }
  }
}
</script>
<style scoped lang="scss">

</style>

弹窗的确定和取消

elementui 自定义内容的示例展示提供了很便捷的插槽方式，唯一要注意的是，我们把click事件中的处理的参数变成自己的就好了，

   <div slot="footer" class="dialog-footer">
       <el-button @click="dialogVisiable = false">取 消</el-button>
       <el-button type="primary" @click="dialogVisiable = false">确 定</el-button>
   </div>