详解关于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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 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下的权限算法的实现
2007/04/28 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
JavaScript 创建对象
2009/07/17 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
BootStrap selectpicker
2016/06/20 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
Vue.js的模板语法详解
2020/02/16 Javascript
python使用cookielib库示例分享
2014/03/03 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
python3图片文件批量重命名处理
2019/10/31 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
中秋节主持词
2014/04/02 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
2014年销售员工作总结
2014/12/01 职场文书
单位租车协议书
2015/01/29 职场文书
羊脂球读书笔记
2015/06/30 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers