zq
1 week ago
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,161 @@ |
|||||
|
<template> |
||||
|
<button |
||||
|
class="hover-button" |
||||
|
:class="{ 'hover-effect': hoverEffect }" |
||||
|
@mouseenter="isHovered = true" |
||||
|
@mouseleave="isHovered = false" |
||||
|
@click="$emit('click')" |
||||
|
> |
||||
|
<!-- 图片/图标部分 --> |
||||
|
<div class="button-icon"> |
||||
|
<slot name="icon"> |
||||
|
<img |
||||
|
v-if="defaultIcon || hoverIcon" |
||||
|
:src="isHovered && hoverIcon ? hoverIcon : defaultIcon" |
||||
|
:alt="iconAlt" |
||||
|
/> |
||||
|
<span v-else class="default-icon-placeholder"></span> |
||||
|
</slot> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 文字部分 --> |
||||
|
<span |
||||
|
class="button-text" |
||||
|
:style="{ |
||||
|
color: isHovered && hoverTextColor ? hoverTextColor : defaultTextColor |
||||
|
}" |
||||
|
> |
||||
|
<slot>{{ buttonText }}</slot> |
||||
|
</span> |
||||
|
</button> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'HoverButton', |
||||
|
props: { |
||||
|
// 按钮文字 |
||||
|
buttonText: { |
||||
|
type: String, |
||||
|
default: '按钮' |
||||
|
}, |
||||
|
// 默认图标 |
||||
|
defaultIcon: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 悬停图标 |
||||
|
hoverIcon: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 图标alt文本 |
||||
|
iconAlt: { |
||||
|
type: String, |
||||
|
default: '按钮图标' |
||||
|
}, |
||||
|
// 默认文字颜色 |
||||
|
defaultTextColor: { |
||||
|
type: String, |
||||
|
default: '#333333' |
||||
|
}, |
||||
|
// 悬停文字颜色 |
||||
|
hoverTextColor: { |
||||
|
type: String, |
||||
|
default: '#007bff' |
||||
|
}, |
||||
|
// 是否启用悬停效果 |
||||
|
hoverEffect: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
// 按钮类型 (primary, danger, success等) |
||||
|
type: { |
||||
|
type: String, |
||||
|
default: 'default', |
||||
|
validator: value => ['default', 'primary', 'danger', 'success', 'warning'].includes(value) |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isHovered: false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.hover-button { |
||||
|
font-family: Microsoft YaHei UI; |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 8px 16px; |
||||
|
border: 1px solid #ddd; |
||||
|
border-radius: 4px; |
||||
|
background-color: white; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
font-size: 14px; |
||||
|
outline: none; |
||||
|
background: #F2F3F5; |
||||
|
border: 1px solid #BABDC2; |
||||
|
} |
||||
|
|
||||
|
.hover-button.hover-effect:hover { |
||||
|
background: #F2F7FF; |
||||
|
border-color: #006AFF; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
/* 按钮类型样式 */ |
||||
|
.hover-button.primary { |
||||
|
background-color: #007bff; |
||||
|
border-color: #007bff; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.hover-button.danger { |
||||
|
background-color: #dc3545; |
||||
|
border-color: #dc3545; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.hover-button.success { |
||||
|
background-color: #28a745; |
||||
|
border-color: #28a745; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.hover-button.warning { |
||||
|
background-color: #ffc107; |
||||
|
border-color: #ffc107; |
||||
|
color: #212529; |
||||
|
} |
||||
|
|
||||
|
/* 图标样式 */ |
||||
|
.button-icon { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.button-icon img { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
transition: opacity 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.default-icon-placeholder { |
||||
|
display: inline-block; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
background-color: #ddd; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
/* 文字样式 */ |
||||
|
.button-text { |
||||
|
transition: color 0.3s ease; |
||||
|
} |
||||
|
</style> |
||||