el-button封装

---

main.js引入全局组件

1. 组件

<template>
  <!--按钮二次封装-->
  <!--<el-button :style="buttonStyle">-->
  <el-button :size="size" :type="type" :icon="icon" :circle="circle" :title="title" :disabled="disabled" @click="handClick">
    <slot name="title"></slot>
  </el-button>
</template>

<script>
export default {
  name: "index",
  props: {
    size: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: ""
    },
    icon: {
      type: String,
      default: ""
    },
    circle: {
      type: Boolean,
      default: false
    }, 
    title: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    }, 

  },
  data() {
    return {}
  },
  components: {},
  mounted() { },
  methods: {
    handClick() {
      this.$emit('parentClick')
    }
  },
  watch: {},
  created() { },
  computed: {
    btnOption() {
      let type, size, icon
      switch (this.title) {
        case "查询":
        case "录入":
        case "导入":
        case "添加":
          type = 'primary'
          icon = ''
          break;
        case "批量删除":
          type = 'danger'
          icon = ''
          break;
        case "批量退回":
          type = 'danger'
          icon = ''
          break;
        case "清空":
          type = 'info'
          icon = ''
          break;
        case "保存":
        case "修改":
        case "确定":
          type = 'primary'
          size = 'medium'
          icon = ''
          break;
        case "关闭":
        case "取消":
          type = ''
          size = 'medium'
          icon = ''
          break;
        case "新增":
          type = 'primary'
          size = 'mini'
          icon = 'el-icon-plus'
          break;
        case "编辑":
          type = 'primary'
          size = 'mini'
          icon = 'el-icon-edit'
          break;
        case "查看":
          type = 'primary'
          size = 'mini'
          icon = 'el-icon-view'
          break;
        case "删除":
          type = 'danger'
          size = 'mini'
          icon = 'el-icon-delete'
          break;
        default:
          type = 'success'
          icon = ''
      }
      return { type, size, icon }
    },
    btnStyle() {
      const fontSize =
        this.btnOption.size == "mini" ? "12px" : this.size == "big" ? "16px" : this.size == "nomal" ? "14px" : "14px"
      return { fontSize }
    },
    buttonStyle() {
      let background = ""
      switch (this.type) {
        case "error":
          background = "red";
          break;
        case "default":
          background = "pink";
          break;
        case "success":
          background = "green";
          break;
      }
      const fontSize =
        this.size == "mini" ? "12px" : this.size == "big" ? "16px" : this.size == "nomal" ? "14px" : "14px"
      const borderColor = this.borderColor
      return { background, fontSize, borderColor }
    }
  },
}
</script>

---

2. 调用

<Buttons :size="elTableBtnSize" type="primary" @parentClick="showEditPopup(scope.row)">
	<span slot="title">编辑</span>
</Buttons>