阻止冒泡

src/components/HoverButton.vue

@@ -4,7 +4,8 @@
     :class="{ 'hover-effect': hoverEffect }"
     @mouseenter="isHovered = true"
     @mouseleave="isHovered = false"
-      @click="$emit('click')"
+    @click="handleClick"
+    type="button"
   >
     <!-- 图片/图标部分 -->
     <div class="button-icon">
@@ -28,10 +29,10 @@
       <slot>{{ buttonText }}</slot>
     </span>
   </button>
-  </template>
+</template>
 
-  <script>
+<script>
-  export default {
+export default {
   name: 'HoverButton',
   props: {
     // 按钮文字
@@ -80,12 +81,19 @@
     return {
       isHovered: false
     }
+  },
+  methods:{
+    handleClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.$emit('click', e);
     }
   }
-  </script>
+}
+</script>
 
-  <style scoped>
+<style scoped>
-  .hover-button {
+.hover-button {
   font-family: Microsoft YaHei UI;
   display: inline-flex;
   align-items: center;
@@ -100,62 +108,62 @@
   outline: none;
   background: #F2F3F5;
   border: 1px solid #BABDC2;
-  }
+}
 
-  .hover-button.hover-effect:hover {
+.hover-button.hover-effect:hover {
   background: #F2F7FF;
   border-color: #006AFF;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
+}
 
-  /* 按钮类型样式 */
+/* 按钮类型样式 */
-  .hover-button.primary {
+.hover-button.primary {
   background-color: #007bff;
   border-color: #007bff;
   color: white;
-  }
+}
 
-  .hover-button.danger {
+.hover-button.danger {
   background-color: #dc3545;
   border-color: #dc3545;
   color: white;
-  }
+}
 
-  .hover-button.success {
+.hover-button.success {
   background-color: #28a745;
   border-color: #28a745;
   color: white;
-  }
+}
 
-  .hover-button.warning {
+.hover-button.warning {
   background-color: #ffc107;
   border-color: #ffc107;
   color: #212529;
-  }
+}
 
-  /* 图标样式 */
+/* 图标样式 */
-  .button-icon {
+.button-icon {
   display: inline-flex;
   align-items: center;
   margin-right: 8px;
-  }
+}
 
-  .button-icon img {
+.button-icon img {
   width: 20px;
   height: 20px;
   transition: opacity 0.3s ease;
-  }
+}
 
-  .default-icon-placeholder {
+.default-icon-placeholder {
   display: inline-block;
   width: 20px;
   height: 20px;
   background-color: #ddd;
   border-radius: 50%;
-  }
+}
 
-  /* 文字样式 */
+/* 文字样式 */
-  .button-text {
+.button-text {
   transition: color 0.3s ease;
-  }
+}
-  </style>
+</style>