详解关于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 相关文章推荐
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
前端开发基础javaScript的六大作用
Aug 06 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运行时强制显示出错信息的代码
2011/04/20 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
重命名批处理python脚本
2013/04/05 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
python函数不定长参数使用方法解析
2019/12/14 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
Python页面加载的等待方式总结
2021/02/28 Python
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
村干部培训方案
2014/05/02 职场文书
纪检监察建议书
2014/05/19 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
小学生交通安全寄语
2015/02/27 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python