详解关于element el-button使用$attrs的一个注意要点


Posted in Javascript onNovember 09, 2018

之前需要对 el-button 做二次封装,所以就用到 vue$attrs$listeners 属性,这两个属性在这不细说,可以在这里 查看详情。

二次封装代码(limit-button)

<template>
 <el-button
   v-show="validButton"
   v-bind="$attrs"
   v-on="$listeners"
 >
  <slot></slot>
 </el-button>
</template>

<script>
import { mapGetters } from 'vuex';
import env from '@/config/env';

export default {
 props: {
  // 按钮唯一标识
  buttonId: {
   type: String,
   required: true,
  },
 },

 computed: {
  ...mapGetters(['getUserBtns']),
  validButton: function() {
   return env.debug ? true : this.getUserBtns[this.buttonId];
  },
 },
};
</script>

这样封装的好处就是不需要将上层每个属性都写一次 prop 定义,对 listeners 也不需要做一层中转 emit

发现问题

在某个页面,点击经过封装的 limit-button 会使页面进行刷新

起初以为是点击事件的冒泡产生的,就把上层引用的 @click 去掉:

<limit-button
  type="warning"
  size="small"
  buttonId="2345434fg"
>
点击
</limit-button>

发现还是一样会产生刷新的事件。

思考可能是 $listeners 的问题,在 mounted 中打印也只有 @click 事件,就算去掉 $listeners 也不管用。 后来在浏览器对dom结构的查看,发现 limit-button 编译后变成:

详解关于element el-button使用$attrs的一个注意要点 

可以看到编译后的 type 变成了 warning ,查 element 的源码可发现

<button
  class="el-button"
  @click="handleClick"
  :disabled="buttonDisabled || loading"
  :autofocus="autofocus"
  :type="nativeType"
  ...
 >
  <i class="el-icon-loading" v-if="loading"></i>
  <i :class="icon" v-if="icon && !loading"></i>
  <span v-if="$slots.default"><slot></slot></span>
</button>

可发现是 $attrs 覆盖了 el-button 的nativeType

问题简化重现

<el-form ref="form" :model="form" label-width="80px">
 <el-form-item>
  <button type="primary">点击会刷新</button>
  <button type="button" @click="onSubmit">点击不会刷新</button>
 </el-form-item>
</el-form>

重现链接

解决方法

type 分出来 props ,然后再通过 prop 引用

<template>
 <el-button
   :type="type"
   v-show="validButton"
   v-bind="$attrs"
   v-on="$listeners"
 >
  <slot></slot>
 </el-button>
</template>

<script>
import { mapGetters } from 'vuex';
import env from '@/config/env';

export default {
 props: {
  // 按钮唯一标识
  buttonId: {
   type: String,
   required: true,
  },
  type: {
    type: String,
  }
 },

 computed: {
  ...mapGetters(['getUserBtns']),
  validButton: function() {
   return env.debug ? true : this.getUserBtns[this.buttonId];
  },
 },
};
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 #Javascript
angular4笔记系列之内置指令小结
Nov 09 #Javascript
node版本管理工具n包使用教程详解
Nov 09 #Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 #Javascript
vue.js层叠轮播效果的实例代码
Nov 08 #Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 #Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 #Javascript
You might like
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
session 加入redis的实现代码
2016/07/15 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
php实现的二分查找算法示例
2017/06/20 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
深入分析PHP设计模式
2020/06/15 PHP
php中yii框架实例用法
2020/12/22 PHP
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
Python求离散序列导数的示例
2019/07/10 Python
python让函数不返回结果的方法
2020/06/22 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
土木工程专业大学毕业生求职信
2013/10/13 职场文书
销售经理竞聘书
2014/03/31 职场文书
会员卡清退活动总结
2014/08/27 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
详解Python类和对象内容
2021/06/22 Python
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
Java设计模式中的命令模式
2022/04/28 Java/Android