element-ui 弹窗组件封装的步骤


Posted in Javascript onJanuary 22, 2021

封装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 弹窗组件封装的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
JavaScript实现切换多张图片
Jan 27 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 #Javascript
原生js实现放大镜组件
Jan 22 #Javascript
Vue仿Bibibili首页的问题
Jan 21 #Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 #Vue.js
Vue看了就会的8个小技巧
Jan 21 #Vue.js
原生js实现滑块区间组件
Jan 20 #Javascript
原生js实现下拉框选择组件
Jan 20 #Javascript
You might like
ext form 表单提交数据的方法小结
2008/08/08 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
车间主管岗位职责
2013/11/14 职场文书
给国外客户的邀请函
2014/01/30 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis