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

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

< >
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];
  },
 },
};
</ >

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

<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>

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

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

< >
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];
  },
 },
};
</ >