Zzc
574cc5a39e
将共享的按钮交互样式（悬停、激活、聚焦、禁用）移至 common.scss 中的新 `.btn-custom-bg` 类，并更新 ActionButton.vue 以扩展该类，从而简化组件特定样式并提高可维护性。
108 lines
2.0 KiB
Vue
108 lines
2.0 KiB
Vue
<template>
|
|
<button class="action-button" :class="buttonClass" @click="handleClick">
|
|
<img v-if="icon" :src="icon" :alt="text" class="action-button__icon" />
|
|
<span class="action-button__text">{{ text }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
text: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'primary',
|
|
validator: (value) => ['primary', 'secondary', 'link'].includes(value)
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'medium',
|
|
validator: (value) => ['small', 'medium', 'large'].includes(value)
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['click'])
|
|
|
|
const buttonClass = computed(() => {
|
|
return [
|
|
`action-button--${props.type}`,
|
|
`action-button--${props.size}`
|
|
]
|
|
})
|
|
|
|
const handleClick = () => {
|
|
emit('click')
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use '@/styles/mixins.scss' as *;
|
|
@use '../../assets/styles/common.scss' as *;
|
|
|
|
.action-button {
|
|
@extend .btn-custom-bg; // 继承自定义背景按钮基类
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: vw(6);
|
|
font-family: SourceHanSansCN-Medium, sans-serif;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
|
|
&__icon {
|
|
width: vw(16);
|
|
height: vh(16);
|
|
}
|
|
|
|
&__text {
|
|
line-height: 1;
|
|
}
|
|
|
|
// 类型样式
|
|
&--primary {
|
|
background-image: url('../../assets/images/文本按钮bg.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
color: var(--text-white);
|
|
}
|
|
|
|
&--secondary {
|
|
background: var(--bg-panel);
|
|
color: var(--text-white);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
&--link {
|
|
background: transparent;
|
|
color: var(--primary-color);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
// 尺寸样式
|
|
&--small {
|
|
padding: vh(6) vw(12);
|
|
font-size: fs(12);
|
|
}
|
|
|
|
&--medium {
|
|
padding: vh(10) vw(20);
|
|
font-size: fs(14);
|
|
}
|
|
|
|
&--large {
|
|
padding: vh(14) vw(28);
|
|
font-size: fs(16);
|
|
}
|
|
}
|
|
</style>
|