element ui Pop up Assembly Packaging Steps

Encapsulate el-dialog as one component

When we use element-ui, if there is a lot of content in a pop-up window, we often package this pop-up window into a component, as follows:

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

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

el-dialog will modify props and report an error

However, there is a problem. When the closing event inside el-dialog is triggered, such as clicking the pop-up shadow, it will be emit event to modify props [visible] of the current component. Because the component cannot directly modify prop attribute, it will report an error.

We add an intermediate variable innerVisible to intercept the modification and acquisition of props [visible]

<!-- DetailDialog.vue html -->
<template>
 <el-dialog title=" Title " :visible.sync="innerVisible" width="720px" >
  <p> Pop-up contents </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>

In this way, when prop [visible] is modified inside el-dialog, we will notify the parent component through emit ('update:'), so as to avoid directly modifying props. Of course, the parent component needs to be modified with the sync modifier:

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

So far, there is no problem with the packaged pop-up module.

Continue to optimize and use v-model to control display hiding

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

Connected to v-model, it is taller and cleaner to use

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

Continue to optimize and package into mixins

When pop-up components are frequently encapsulated, the above logic also needs to be copied constantly, so continue to optimize, and encapsulate the above logic for controlling display hiding into mxins, which can be directly reused

// 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)
   }
  }
 }
}

Then, when packaging the pop-up plug-in, only mixins is introduced to complete the display and hiding logic.

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

The above is the element-ui pop-up component packaging steps in detail, more information about element-ui pop-up component packaging please pay attention to other related articles on this site!