From 5f1f8fa44244a654a2362edb65cd4fe12e21e4b7 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Fri, 20 Jun 2025 16:43:59 +0800
Subject: [PATCH] =?UTF-8?q?=E9=98=BB=E6=AD=A2=E5=86=92=E6=B3=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HoverButton.vue | 320 +++++++++++++++++++++--------------------
 1 file changed, 164 insertions(+), 156 deletions(-)

diff --git a/src/components/HoverButton.vue b/src/components/HoverButton.vue
index 2f80849..2456a87 100644
--- a/src/components/HoverButton.vue
+++ b/src/components/HoverButton.vue
@@ -1,161 +1,169 @@
 <template>
-    <button
-      class="hover-button"
-      :class="{ 'hover-effect': hoverEffect }"
-      @mouseenter="isHovered = true"
-      @mouseleave="isHovered = false"
-      @click="$emit('click')"
+  <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
+      }"
     >
-      <!-- 图片/图标部分 -->
-      <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)
-      }
+      <slot>{{ buttonText }}</slot>
+    </span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'HoverButton',
+  props: {
+    // 按钮文字
+    buttonText: {
+      type: String,
+      default: '按钮'
     },
-    data() {
-      return {
-        isHovered: false
-      }
+    // 默认图标
+    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
+    }
+  },
+  methods:{
+    handleClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.$emit('click', e);
     }
   }
-  </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>
\ No newline at end of file
+}
+</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>
\ No newline at end of file