kuailelunwen_new_houtai/src/components/HoverButton.vue

<template>
  <button
    class="hover-button"
    :class="{ 'hover-effect': hoverEffect, [type]: type }"
    :style="{
      width: width,
      height: height,
      minWidth: minWidth,
      minHeight: minHeight,
      ...customStyle
    }"
    @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"
        /> -->
        <SvgIcon1  v-if="defaultIcon || hoverIcon" :iconPath="defaultIcon" activeColor="#006AFF" :isActive="isHovered"/>
        <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>
import SvgIcon1 from './SvgIcon1.vue';

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)
    },
    // 自定义宽度
    width: {
      type: String,
      default: null
    },
    // 自定义高度
    height: {
      type: String,
      default: null
    },
    // 最小宽度
    minWidth: {
      type: String,
      default: null
    },
    // 最小高度
    minHeight: {
      type: String,
      default: null
    },
    // 自定义样式对象
    customStyle: {
      type: Object,
      default: () => ({})
    }
  },
  components:{
    SvgIcon1
  },
  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;
  box-sizing: border-box; /* 确保宽高包含padding和border */
}

.hover-button.hover-effect:hover {
  background: #F2F7FF !important;
  border-color: #006AFF !important;
  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>