El-dialog secondary encapsulation of popover components based on Element-UI library

Encapsulate el-Dialog as a public component in development

• The problem is that if the popover is closed in the component, the parent component should be notified synchronously.
• Here with.syncModifiers can do that conveniently. See the code

// The parent component uses
<card-dialog :visible.sync="visible"></card-dialog>
// Use the.sync modifier so that you can listen for changes to the property.
// If you don't use.sync, you need to bind a method to the component to listen for changes
// Then update the component manually
Copy the code

// Inside the Card-dialog component
<template>
  <div>
    <el-dialog 
        title="Card Opening Settings" 
        :visible.sync="openCardDialog">
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean.default: false}},computed: {
    openCardDialog: {
      get() {
        return this.visible
      },
      set(val) {
        console.log(val)
        // openCardDialog notifythe parent component of changes
        this.$emit('update:visible', val)
      }
    }
  }
}
</script>
Copy the code

The original link: blog.csdn.net/laishaojian…