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> |
|||