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>
<el-button
:type="type"
size="small"
:type="innerType"
:plain="innerPlain"
size="mini"
:disabled="disabled"
:loading="loading"
:icon="icon"
@click="handleClick"
>
<slot />
@@ -24,6 +26,10 @@ export default {
type: String,
default: 'primary'
},
icon: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
@@ -33,6 +39,42 @@ export default {
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: {
handleClick(event) {
this.$emit('click', event)