二次封装动态的el-button组件

效果如下

举个栗子，我想要编辑和删除按钮颜色是16进制的，代码如下

<template>
  <el-button
    class="type-button"
    type="text"
    :icon="iconfont"
    :class="[classes, type == '编辑' ? 'orange' : '', type == '删除' ? 'gray' : '']"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot>{{ this.type }}</slot>
  </el-button>
</template>

<script>
export default {
  name: "type-button",
  props: {
    type: {
      type: [String, undefined],
      default: undefined
    },
    icon: {
      type: [String, undefined],
      default: undefined
    },
    color: {
      type: [String, undefined],
      default: undefined
    }
  },
  computed: {
    findTypes() {
      switch (this.type) {
        case "删除":
          return {
            color: "danger",
            icon: "el-icon-delete"
          }
        case "编辑":
          return {
            color: "info",
            icon: "gansu-icon-bianji"
          }
        case "查看":
          return {
            color: "priamry",
            icon: "el-icon-setting"
          }
        case "详情":
          return {
            color: "priamry",
            icon: "el-icon-more"
          }
        default:
          return {
            color: this.color,
            icon: this.icon
          }
      }
    },
    classes() {
      const color = this.color ? this.color : this.findTypes.color
      return `${color}--text`
    },
    iconfont() {
      return this.icon ? this.icon : this.findTypes.icon
    }
  }
}
</script>

<style lang="scss" scoped>
.orange {
  color: #ff5400 !important;
}
.orange.is-disabled {
  color: #d8d9db !important;
}
.gray {
  color: #666666 !important;
}
.gray.is-disabled {
  color: #d8d9db !important;
}
</style>