Encapsulate Ant Design vue component button button custom color, size, etc.
The renderings are as follows:
Create a new component code in the component file as follows:
<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('middle')
const iconType = ref('')
watch(() => props.type, (v) => {
switch (v) {
case 'yellow':
customClass.value = 'c-button-yellow'
customType.value = 'default'
break
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 ? 'middle' : 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-yellow {
color: #fff;
background-color: rgb(180, 180, 63);
border-color: rgb(180, 180, 63);
}
.c-button-yellow:hover {
color: #fff;
background-color: rgb(202, 202, 67);
border-color: yellow;
}
.c-button-yellow[disabled],
.c-button-yellow[disabled]:hover,
.c-button-yellow[disabled]:focus,
.c-button-yellow[disabled]:active {
color: rgba(0, 0, 0, 0.25);
background: #f5f5f5;
border-color: #d9d9d9;
text-shadow: none;
box-shadow: none;
}
.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>
Vue3 introduces components, Baidu itself, and
directly quotes on the required pages
<a-button type="primary" @click="downPdf">下载</a-button>
<a-button type="primary" @click="showDrawer(taskId)">参数调整</a-button>
<c-button type="purple" :disabled="true" :loading="true">disabled---loading</c-button>
<c-button type="purple">purple</c-button>
<c-button type="yellow">yellow</c-button>
<c-button type="black" size="large">black</c-button>
<c-button type="black" size="middle">black</c-button>
<c-button type="black" size="small">black</c-button>
<c-button type="success" icon="plus-outlined">success</c-button>
<c-button type="warning">warning</c-button>
<c-button type="error">error</c-button>
<c-button type="primary">primary</c-button>
<c-button type="text">text</c-button>
<c-button type="link">link</c-button>