jinNiucourseMall_uniapp/components/FloatingActionButton/FloatingActionButton.vue

<template>
  <view class="fab-container" :style="positionStyle">
    <!-- 菜单项 -->
    <view class="fab-menu" v-if="isExpanded">
      <view 
        v-for="(item, index) in menuItems" 
        :key="index"
        class="menu-item"
        @click="handleMenuItemClick(item, index)"
      >
        <text class="menu-item-text">{{ item.text }}</text>
        <text class="menu-item-icon">{{ item.icon }}</text>
      </view>
    </view>
    
    <!-- 主悬浮按钮 -->
    <view 
      class="fab-main"
      @click="toggleMenu"
      :style="{ backgroundColor: bgColor }"
    >
      <text class="fab-icon" :class="{ rotated: isExpanded }">{{ icon }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FloatingActionButton',
  props: {
    // 菜单项列表 [{ text: '分享', icon: '📤' }]
    menuItems: {
      type: Array,
      default: () => []
    },
    // 主按钮图标
    icon: {
      type: String,
      default: '+'
    },
    // 主按钮背景色
    bgColor: {
      type: String,
      default: '#007AFF'
    },
    // 距离底部的距离（px）
    bottom: {
      type: Number,
      default: 100
    },
    // 距离右侧的距离（px）
    right: {
      type: Number,
      default: 30
    }
  },
  data() {
    return {
      isExpanded: false
    }
  },
  computed: {
    positionStyle() {
      return {
        bottom: this.bottom + 'px',
        right: this.right + 'px'
      }
    }
  },
  methods: {
    toggleMenu() {
      this.isExpanded = !this.isExpanded
      this.$emit('fabClick', this.isExpanded)
    },
    handleMenuItemClick(item, index) {
      this.$emit('menuItemClick', { item, index })
      // 点击后自动收起菜单
      this.isExpanded = false
    },
    // 手动展开
    expand() {
      this.isExpanded = true
    },
    // 手动收起
    collapse() {
      this.isExpanded = false
    }
  }
}
</script>

<style lang="scss" scoped>
.fab-container {
  position: fixed;
  z-index: 999;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
}

.fab-main {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
  }
}

.fab-icon {
  font-size: 48rpx;
  color: #fff;
  transition: transform 0.3s ease;
  
  &.rotated {
    transform: rotate(45deg);
  }
}

.fab-menu {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  animation: slideUp 0.3s ease;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
  }
}

.menu-item-text {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  white-space: nowrap;
}

.menu-item-icon {
  width: 80rpx;
  height: 80rpx;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  font-size: 40rpx;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>