feat(CuteButton): 添加按钮图标支持和尺寸调整

- 将按钮大小从 small 改为 mini
- 添加 icon 属性支持图标显示
- 实现 innerType 计算属性处理不同按钮类型映射
- 实现 innerPlain 计算属性控制按钮样式状态
- 支持 primary、secondary、normal、text 四种按钮类型
- 保持原有 click 事件功能不变
This commit is contained in:
2026-02-03 11:39:04 +08:00
parent 4f630b2ca2
commit 30d32c85ad
@@ -6,10 +6,12 @@
--> -->
<template> <template>
<el-button <el-button
:type="type" :type="innerType"
size="small" :plain="innerPlain"
size="mini"
:disabled="disabled" :disabled="disabled"
:loading="loading" :loading="loading"
:icon="icon"
@click="handleClick" @click="handleClick"
> >
<slot /> <slot />
@@ -24,6 +26,10 @@ export default {
type: String, type: String,
default: 'primary' default: 'primary'
}, },
icon: {
type: String,
default: ''
},
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false
@@ -33,6 +39,42 @@ export default {
default: false default: false
} }
}, },
computed: {
innerType() {
if (this.type) {
if (this.type === 'primary') {
return 'primary'
}
if (this.type === 'secondary') {
return 'primary'
}
if (this.type === 'normal') {
return null
}
if (this.type === 'text') {
return 'text'
}
}
return null
},
innerPlain() {
if (this.type) {
if (this.type === 'primary') {
return false
}
if (this.type === 'secondary') {
return true
}
if (this.type === 'normal') {
return false
}
if (this.type === 'text') {
return false
}
}
return false
}
},
methods: { methods: {
handleClick(event) { handleClick(event) {
this.$emit('click', event) this.$emit('click', event)