Ant Design Vue (antdv) Button 按钮

今天使用了 antdv ，其它的感觉还好，就是按钮是真的丑，而且颜色只有那么两个，有点受不了，就重新封装了一下。需要的朋友可以直接拿去用

效果图

1. 在 src/components下创建一个公共组件：CButton

<template>
  <a-button
    :type="customType"
    :class="customClass"
    :size="customSize"
    :disabled="disabled"
  >
    <template v-if="iconType" #icon>
      <component :is="iconType" />
    </template>
    <slot />
  </a-button>
</template>
<script>
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
  name: 'CButtonIndex',
  props: {
    type: { type: String, default: '' },
    size: { type: String, default: '' },
    icon: { type: String, default: '' },
    disabled: { type: Boolean, default: false },
    permission: { type: [String, Boolean], default: true }
  },
  setup (props) {
    const customClass = ref('c-button-primary')
    const customType = ref('')
    const customSize = ref('small')
    const iconType = ref('')
    watch(() => props.type, (v) => {
      switch (v) {
      case 'warning':
        customClass.value = 'c-button-warning'
        customType.value = 'default'
        break
      case 'error':
        customClass.value = 'c-button-error'
        customType.value = 'default'
        break
      case 'success':
        customClass.value = 'c-button-success'
        customType.value = 'default'
        break
      case 'primary':
        customClass.value = 'c-button-primary'
        customType.value = 'primary'
        break
      case 'cyan':
        customClass.value = 'c-button-cyan'
        customType.value = 'default'
        break
      case 'black':
        customClass.value = 'c-button-black'
        customType.value = 'default'
        break
      case 'purple':
        customClass.value = 'c-button-purple'
        customType.value = 'default'
        break
      case 'text':
        customClass.value = ''
        customType.value = 'text'
        break
      case 'link':
        customClass.value = ''
        customType.value = 'link'
        break
      default:
        customClass.value = ''
        customType.value = 'default'
        break
      }
    }, { immediate: true })
    watch(() => props.size, v => {
      customSize.value = !v ? 'small' : v
    }, { immediate: true })
    watch(() => props.icon, v => {
      iconType.value = v
    }, { immediate: true })
    watch(() => props, () => {}, { immediate: true })
    return {
      customClass,
      customType,
      customSize,
      iconType
    }
  }
})
</script>
<style scoped>
.c-button-primary {
  color: #fff;
  background-color: #2db7f5;
  border-color: #2db7f5;
}
.c-button-primary:hover {
  color: #fff;
  background-color: #3dc1fc;
  border-color: #2db7f5;
}
.c-button-primary[disabled], .c-button-primary[disabled]:hover, .c-button-primary[disabled]:focus, .c-button-primary[disabled]:active {
  color: rgba(0, 0, 0, 0.25);
  background: #f5f5f5;
  border-color: #d9d9d9;
  text-shadow: none;
  box-shadow: none;
}

.c-button-warning {
  color: #fff;
  background-color: #ff9900;
  border-color: #ff9900;
}
.c-button-warning:hover {
  color: #fff;
  background-color: #fcac35;
  border-color: #ff9900;
}
.c-button-warning[disabled], .c-button-warning[disabled]:hover, .c-button-warning[disabled]:focus, .c-button-warning[disabled]:active {
  color: rgba(0, 0, 0, 0.25);
  background: #f5f5f5;
  border-color: #d9d9d9;
  text-shadow: none;
  box-shadow: none;
}

.c-button-error {
  color: #fff;
  background-color: #ff3300;
  border-color: #ff3300;
}
.c-button-error:hover {
  color: #fff;
  background-color: #fc653f;
  border-color: #ff3300;
}
.c-button-error[disabled], .c-button-error[disabled]:hover, .c-button-error[disabled]:focus, .c-button-error[disabled]:active {
  color: rgba(0, 0, 0, 0.25);
  background: #f5f5f5;
  border-color: #d9d9d9;
  text-shadow: none;
  box-shadow: none;
}

.c-button-success {
  color: #fff;
  background-color: #00cc66;
  border-color: #00cc66;
}
.c-button-success:hover {
  color: #fff;
  background-color: #03e071;
  border-color: #00cc66;
}
.c-button-success[disabled], .c-button-success[disabled]:hover, .c-button-success[disabled]:focus, .c-button-success[disabled]:active {
  color: rgba(0, 0, 0, 0.25);
  background: #f5f5f5;
  border-color: #d9d9d9;
  text-shadow: none;
  box-shadow: none;
}

.c-button-cyan {
  color: #fff;
  background-color: #04c1e1;
  border-color: #04c1e1;
}
.c-button-cyan:hover {
  color: #fff;
  background-color: #0ad5f8;
  border-color: #04c1e1;
}
.c-button-cyan[disabled], .c-button-cyan[disabled]:hover, .c-button-cyan[disabled]:focus, .c-button-cyan[disabled]:active {
  color: rgba(0, 0, 0, 0.25);
  background: #f5f5f5;
  border-color: #d9d9d9;
  text-shadow: none;
  box-shadow: none;
}

.c-button-black {
  color: #fff;
  background-color: #131313;
  border-color: #131313;
}
.c-button-black:hover {
  color: #fff;
  background-color: #313131;
  border-color: #131313;
}
.c-button-black[disabled], .c-button-black[disabled]:hover, .c-button-black[disabled]:focus, .c-button-black[disabled]:active {
  color: rgba(0, 0, 0, 0.25);
  background: #f5f5f5;
  border-color: #d9d9d9;
  text-shadow: none;
  box-shadow: none;
}

.c-button-purple {
  color: #fff;
  background-color: #B500FE;
  border-color: #B500FE;
}
.c-button-purple:hover {
  color: #fff;
  background-color: #c951fa;
  border-color: #B500FE;
}
.c-button-purple[disabled], .c-button-purple[disabled]:hover, .c-button-purple[disabled]:focus, .c-button-purple[disabled]:active {
  color: rgba(0, 0, 0, 0.25);
  background: #f5f5f5;
  border-color: #d9d9d9;
  text-shadow: none;
  box-shadow: none;
}
</style>

2. 将其注册为公共组件（以前的文章有vue3自动注册公共组件的方法，这里就不再说了）

3. 使用方法（其它的原生属性继承添加可自动处理）

<template>
  <c-body>
    <div style="display: flex;flex-direction: column">
      <div style="display: flex;margin-bottom: 10px;">
        <span style="margin-right: 20px;">紫色：c-button type="purple"</span>
        <c-button type="purple" :loading="true">哈哈哈</c-button>
      </div>
      <div style="display: flex;margin-bottom: 10px;">
        <span style="margin-right: 20px;">黑色：c-button type="black"</span>
        <c-button type="black">哈哈哈</c-button>
      </div>
      <div style="display: flex;margin-bottom: 10px;">
        <span style="margin-right: 20px;">绿色：c-button type="success" icon="plus-outlined"</span>
        <c-button type="success" icon="plus-outlined" @click="test">哈哈哈</c-button>
      </div>
      <div style="display: flex;margin-bottom: 10px;">
        <span style="margin-right: 20px;">橙色：c-button type="warning"</span>
        <c-button type="warning">哈哈哈</c-button>
      </div>
      <div style="display: flex;margin-bottom: 10px;">
        <span style="margin-right: 20px;">红色：c-button type="error"</span>
        <c-button type="error">哈哈哈</c-button>
      </div>
      <div style="display: flex;margin-bottom: 10px;">
        <span style="margin-right: 20px;">蓝色：c-button type="primary"</span>
        <c-button type="primary">哈哈哈</c-button>
      </div>
      <div style="display: flex;margin-bottom: 10px;">
        <span style="margin-right: 20px;">Text：c-button type="text"</span>
        <c-button type="text">哈哈哈</c-button>
      </div>
      <div style="display: flex;margin-bottom: 10px;">
        <span style="margin-right: 20px;">Link：c-button type="link"</span>
        <c-button type="link">哈哈哈</c-button>
      </div>
    </div>
  </c-body>
</template>

<script>
export default {
  name: 'ViewsHome',
  setup () {
    const test= () => {
      console.log('这个家伙真的会喷火')
    }
    return { test }
  }
}
</script>

<style scoped>
</style>

希望对需要的朋友有所帮助