Steps for encapsulating element-ui pop-up components

<!-- DetailDialog.vue html -->
<template>
 <el-dialog title="Title" :visible.sync="visible" width="720px" >
  <p>Popup content</p>
 </el-dialog>
</template>

// DetailDialog.vue js
<script>
 props: {
  visible:
   type: Boolean,
   default: false
  }
 }
</script>

<!-- DetailDialog.vue html -->
<template>
 <el-dialog title="Title" :visible.sync="innerVisible" width="720px" >
  <p>Popup content</p>
 </el-dialog>
</template>

// DetailDialog.vue js
<script>
export default {
 props: {
  visible:
   type: Boolean,
   default: false
  }
 },
 computed: {
  innerVisible: {
   get: function() {
    return this.visible
   },
   set: function(val) {
    this.$emit('update:visible', val)
   }
  }
 }
}
</script>

<!-- father.vue html -->
<DetailDialog :visible.sync="detailVisible" />

// DetailDialog.vue js
<script>
export default {
 model: {
  prop: 'visible', // Modify the props name bound to v-model event: 'toggle' // Modify the custom event name bound to v-model },
 props: {
  visible:
   type: Boolean,
   default: false
  }
 },
 computed: {
  innerVisible: {
   get: function() {
    return this.visible
   },
   set: function(val) {
    this.$emit('update:toggle', val)
   }
  }
 }
}
</script>

<!-- father.vue html -->
<DetailDialog v-model="detailVisible" />

// vModelDialog.js
export default {
 model: {
  prop: 'visible',
  event: 'toggle'
 },
 props: {
  visible:
   type: Boolean,
   default: () => {
    return false
   }
  }
 },
 computed: {
  innerVisible: {
   get: function() {
    return this.visible
   },
   set: function(val) {
    this.$emit('toggle', val)
   }
  }
 }
}

// DetailDialog.vue js
<script>
import vModelDialog from './vModelDialog.js'
export default {
 mixins: [vModelDialog],
}
</script>