封装button组件

<!--
 * 通用button
-->
<template>
  <div class="base-button-content" @click="submit" :class="[setButtonType,setButtonSize,setDisabled]">
    <div class="base-button">
      <slot name="left-icon"></slot> <!-- class="iconLeft" -->
      <span class="button-title">{{buttonTitle}}</span>
      <slot name="right-icon"></slot> <!-- class="iconLeft" -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    buttonTitle: { type: String, default: '按钮' }, // 按钮名称
    size: { type: String, default: 'default' }, //按钮大小 medium高度36px big高度40px default高度32px small高度28px
    type: { type: String, default: 'primary' },//主按钮primary first一级按钮 second二级按钮 危险按钮error 成功按钮success
    disabled: { type: Boolean, default: false },//是否禁用 true为禁用
  },
  computed: {
    setDisabled() {
      if (this.disabled) {
        return this.buttonType[this.type].disabled
      }
    },
    setButtonType() {
      return this.buttonType[this.type].default
    },
    setButtonSize() {
      return this.buttonSize[this.size]
    },
  },
  data() {
    return {
      buttonType: {
        'primary': {
          default: 'primary-button',
          disabled: 'disabled-primary-button'
        },//主按钮样式
        'first': {
          default: 'first-button',
          disabled: 'disabled-first-button'
        },//一级按钮样式
        'second': {
          default: 'second-button',
          disabled: 'disabled-second-button'
        },//二级按钮样式
        'error': {
          default: 'error-button',
          disabled: 'disabled-error-button'
        },//失败按钮样式
        'success': {
          default: 'success-button',
          disabled: 'disabled-success-button'
        },//成功按钮样式
      },
      buttonSize: {
        'big': 'big-button',//大按钮样式
        'medium': 'medium-button',//中等按钮
        'default': 'default-button',//默认按钮样式
        'small': 'small-button',//小按钮样式
      }
    }
  },
  methods: {
    submit() {
      if (!this.disabled) {
        console.log(1111);
        this.$emit('click')
      }
    }
  }

}
</script>

<style lang="less" scoped>
// 高度40px
.big-button {
  font-size: 14px;
  padding: 11px 20px;
  // line-height: 40px;
  // height: 40px;
}
//高度 36px
.medium-button {
  font-size: 14px;
  padding: 9px 20px;
  // line-height: 36px;
  // height: 36px;
}
// 高度32px
.default-button {
  font-size: 14px;
  padding: 7px 15px;
  // height: 32px;
}
// 高度28px
.small-button {
  font-size: 14px;
  padding: 5px 15px;
  // line-height: 28px;
  // height: 28px;
}
// 主按钮样式
.primary-button {
  background-color: #409eff;
  border: 1px solid #409eff;
  color: #fff;
  &:hover {
    background-color: #5eadfe;
    border-color: #2291ff;
  }
  &:active {
    background-color: #3a8ee6;
    border-color: #2291ff;
  }
}
// 主按钮样式禁用状态
.disabled-primary-button {
  cursor: not-allowed !important;
  background-color: #a0cfff !important;
  border: 1px solid #a0cfff !important;
}
// 一级按钮样式
.first-button {
  background-color: #ecf5ff;
  border: 1px solid #b3d8ff;
  color: #409eff;
  &:hover {
    background-color: #409eff;
    color: #fff;
  }
  &:active {
    background-color: #3a8ee6;
  }
}
// 一级按钮样式禁用状态
.disabled-first-button {
  cursor: not-allowed !important;
  background-color: #ecf5ff !important;
  border: 1px solid #d9ecff !important;
  color: #8cc5ff !important;
}
// 二级按钮样式
.second-button {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  color: #666666;
  &:hover {
    border-color: #409eff;
    color: #409eff;
  }
  &:active {
    border-color: #3a8ee6;
    color: #3a8ee6;
  }
}
// 二级按钮样式禁用状态
.disabled-second-button {
  cursor: not-allowed !important;
  background-color: #fff !important;
  border: 1px solid #ebeef5 !important;
  color: #c0c4cc !important;
}
// 危险按钮样式
.error-button {
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  color: #f56c6c;
  &:hover {
    background-color: #f56c6c;
    color: #fff;
  }
  &:active {
    background-color: #dd6161;
  }
}
// 危险按钮样式禁用状态
.disabled-error-button {
  cursor: not-allowed !important;
  background-color: #fef0f0 !important;
  border: 1px solid #fde2e2 !important;
  color: #f9a7a7 !important;
}
// 成功按钮样式
.success-button {
  background-color: #f0f9eb;
  border: 1px solid #c2e7b0;
  color: #67c23a;
  &:hover {
    background-color: #67c23a;
    color: #fff;
  }
  &:active {
    background-color: #5daf34;
  }
}
// 成功按钮样式禁用状态
.disabled-success-button {
  cursor: not-allowed !important;
  border: 1px solid #e1f3d8 !important;
  color: #a4da89 !important;
}
// 默认主样式
.base-button-content {
  cursor: pointer;
  box-sizing: border-box;
  display: inline-block;
  transition: 0.1s;
  border-radius: 4px;
  text-align: center;
  .base-button {
    display: flex;
    justify-content: center;
    align-items: center;
    .iconRight {
      i {
        font-size: 12px;
      }
      margin-left: 4px;
    }
    .iconLeft {
      i {
        font-size: 12px;
      }
      margin-right: 4px;
    }
  }
}
</style>