kuailelunwen_new_houtai/src/components/HoverButton.vue

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