对el-button的二次封装

如果项目中需要对el-button进行二次封装,就可以参考下面的封装方式

首先我们可以在components文件夹下创建KtButton.vue组件

<template>
  <el-button
    :size="size"
    :type="type"
    :icon="icon"
    :loading="loading"
    @click="handleClick"
  >
    <slot />
  </el-button>
</template>

<script>
import debounce from '../utils/debounce.js'
export default {
  name: 'KtBtn',
  props: {
    icon: { // 按钮图标
      type: String,
      default: null
    },
    label: { // 按钮显示文本
      type: String,
      default: 'Button'
    },
    size: { // 按钮尺寸
      type: String,
      default: null
    },
    type: { // 按钮类型
      type: String,
      default: null
    },
    loading: { // 按钮加载标识
      type: Boolean,
      default: false
    },
    disabled: { // 按钮是否禁用
      type: Boolean,
      default: false
    },
    perms: { // 按钮权限标识，外部使用者传入
      type: String,
      default: null
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick: function() {
        debounce(() => {
            // 按钮操作处理函数
            this.$emit('click', {})
        }, 500)
    }
  }
}
</script>
<style>

</style>

如果在页面中需要用到这个封装的按钮组件的时候就可以直接引入

  <KtButton
          size="mini"
          label="新增"
          perms="device:add"
          type="primary"
          icon="el-icon-plus"
          @click="openAddDialog"
        />