element-ui 弹窗组件封装的步骤
更新时间：2021年01月22日 09:37:08 作者：漓漾li
这篇文章主要介绍了element-ui 弹窗组件封装的步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
封装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。当然父组件需要加上sync修饰符来接受修改：
<!-- 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 弹窗组件封装的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue中点击按钮下载文件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
这篇文章主要给大家介绍了关于Vue+Element-ui日历排班自定义的相关资料,有现成的日历插件但是不符合需求,所以项目中使用vue+element的表格组件自己实现一个日历组件,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue3点击出现弹窗后背景变暗且不可操作的实现代码,本文通过实例代码图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的,这篇文章主要给大家介绍了关于Vue组件之间的通信方式,需要的朋友可以参考下2022-06-06
本文主要介绍了Vue后台管理系统之实现分页功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
本文主要介绍了vue3安装vant实现按需引入和全局引入，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了VeeValidate在vue项目里表单校验应用案例，VeeValidate是Vue.js的验证库，它有很多验证规则，并支持自定义规则，非常具有实用价值，需要的朋友可以参考下2018-05-05
这篇文章主要给大家介绍了关于vue2.0+elementui实现一个上门取件时间组件的相关资料,用于预约上门服务时间 看到网上有很多乱七八糟的代码,看着头疼,于是自己写了一个简单的,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了浅谈Vue.js中如何实现自定义下拉菜单指令，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
本文主要介绍了vue中v-model指令与.sync修饰符的区别详解，详细的介绍了两个的用法和区别，感兴趣的可以了解一下2021-08-08
最新评论