feat(CuteButton): 添加按钮图标支持和尺寸调整
- 将按钮大小从 small 改为 mini - 添加 icon 属性支持图标显示 - 实现 innerType 计算属性处理不同按钮类型映射 - 实现 innerPlain 计算属性控制按钮样式状态 - 支持 primary、secondary、normal、text 四种按钮类型 - 保持原有 click 事件功能不变
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user