zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

阻止冒泡

pull/53/head
zq 2 weeks ago
parent
28e9bc13c3
commit
5f1f8fa442
1 changed files with 164 additions and 156 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 298
      src/components/HoverButton.vue

298
src/components/HoverButton.vue
View File

@ -1,161 +1,169 @@
<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>
<button
class="hover-button"
:class="{ 'hover-effect': hoverEffect }"
@mouseenter="isHovered = true"
@mouseleave="isHovered = false"
@click="handleClick"
type="button"
>
<!-- 图片/图标部分 -->
<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>
<!-- 文字部分 -->
<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)
}
<script>
export default {
name: 'HoverButton',
props: {
// 按钮文字
buttonText: {
type: String,
default: '按钮'
},
// 默认图标
defaultIcon: {
type: String,
default: ''
},
// 悬停图标
hoverIcon: {
type: String,
default: ''
},
// 图标alt文本
iconAlt: {
type: String,
default: '按钮图标'
},
data() {
return {
isHovered: false
}
// 默认文字颜色
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
}
},
methods:{
handleClick(e) {
e.preventDefault();
e.stopPropagation();
this.$emit('click', e);
}
}
</script>
}
</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;
}
<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.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.primary {
background-color: #007bff;
border-color: #007bff;
color: white;
}
.hover-button.danger {
background-color: #dc3545;
border-color: #dc3545;
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.success {
background-color: #28a745;
border-color: #28a745;
color: white;
}
.hover-button.warning {
background-color: #ffc107;
border-color: #ffc107;
color: #212529;
}
.hover-button.warning {
background-color: #ffc107;
border-color: #ffc107;
color: #212529;
}
/* 图标样式 */
.button-icon {
display: inline-flex;
align-items: center;
margin-right: 8px;
}
/* 图标样式 */
.button-icon {
display: inline-flex;
align-items: center;
margin-right: 8px;
}
.button-icon img {
width: 20px;
height: 20px;
transition: opacity 0.3s ease;
}
.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%;
}
.default-icon-placeholder {
display: inline-block;
width: 20px;
height: 20px;
background-color: #ddd;
border-radius: 50%;
}
/* 文字样式 */
.button-text {
transition: color 0.3s ease;
}
</style>
/* 文字样式 */
.button-text {
transition: color 0.3s ease;
}
</style>
Write Preview
Loading…
Cancel
Save