element-ui弹窗组件封装的步骤
封装el-dialog为⼀个组件
我们在使⽤element-ui的时候，如果⼀个弹窗中的内容很多，那么我们经常会把这个弹窗封装成⼀个组件，如下：
<!-- DetailDialog.vue html -->
<template>
<el-dialog title="标题" :visible.sync="visible" width="720px" >
<p>弹窗内容</p>
</el-dialog>
</template>
// DetailDialog.vue js
<script>
props: {
visible: {
type: Boolean,
default: false
}
}
</script>
el-dialog会修改 props，并报错
但是这样会有⼀个问题，当触发了el-dialog内部的关闭事件时，⽐如点击弹窗阴影等，它会emit事件来修改当前组件的props [visible]，由于组件不能直接修改prop属性，然后就会报错。
我们新增了⼀个中间变量innerVisible，来拦截props [visible]的修改和获取
<!-- DetailDialog.vue html -->
<template>
<el-dialog title="标题" :visible.sync="innerVisible" width="720px" >
<p>弹窗内容</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>
这样在el-dialog内部修改prop[visible]的时候，我们会通过emit('update:')的⽅式来通知⽗组件，避免直接修改props。当然⽗组件需要加上来接受修改：
<!-- father.vue html -->
<DetailDialog :visible.sync="detailVisible" />
到此为⽌，封装的弹窗组件已经没有问题了。
继续优化，使⽤v-model控制显⽰隐藏
// DetailDialog.vue js
<script>
export default {
model: {
prop: 'visible', // 修改 v-model 绑定的props名称
event: 'toggle' // 修改 v-model 绑定的⾃定义事件名
},
props: {
visible: {
type: Boolean,
default: false
}
},
computed: {
innerVisible: {
get: function() {
return this.visible
},
set: function(val) {
this.$emit('update:toggle', val)
}
}
}
}
</script>
接⼊了v-model，使⽤起来就更⾼⼤上⽽且整洁了
<!-- father.vue html -->
<DetailDialog v-model="detailVisible" />
继续优化，封装成mixins
当频繁封装弹窗组件时，那么上述逻辑也需要不停地复制，所以继续优化，把上述控制显⽰隐藏的逻辑封装成了mxins，直接复⽤即可
// 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)
}
}
}
}
那么封装弹窗插件时，只需引⼊mixins即可完成显⽰隐藏逻辑。
// DetailDialog.vue js
<script>
自动弹窗代码
import vModelDialog from './vModelDialog.js'
export default {
mixins: [vModelDialog],
}
</script>
以上就是element-ui 弹窗组件封装的步骤的详细内容，更多关于element-ui 弹窗组件封装的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。