@tanzhenxing/zx-fab v1.0.3

ZX-FAB 悬浮按钮组件

一个功能丰富、高度可定制的悬浮按钮组件，支持多种位置、方向和动画效果。

功能特点

• 支持四个角落定位（左上、右上、左下、右下）
• 支持水平和垂直方向展开
• 多种动画效果（缩放、淡入淡出、滑动）
• 高度可定制的样式
• 可自定义按钮大小、图标和颜色

基本用法

<template>
  <zx-fab 
    :content="fabItems" 
    @trigger="handleTrigger" 
    @fabClick="handleFabClick"
  />
</template>

<script setup>
import { ref } from 'vue';

const fabItems = ref([
  {
    icon: 'star',
    text: '收藏',
    active: false
  },
  {
    icon: 'share',
    text: '分享',
    active: false
  },
  {
    icon: 'heart',
    text: '喜欢',
    active: false,
    selectedIcon: 'heart-fill'
  }
]);

const handleTrigger = ({ index, item }) => {
  console.log('点击了菜单项', index, item);
  // 可以在这里处理菜单项的激活状态
  fabItems.value[index].active = !fabItems.value[index].active;
};

const handleFabClick = () => {
  console.log('点击了主按钮');
};
</script>

属性说明

pattern 对象属性

content 数组项属性

事件

方法

通过ref可以获取组件实例并调用以下方法：

示例

不同位置

<!-- 左下角 (默认) -->
<zx-fab :content="items" horizontal="left" vertical="bottom" />

<!-- 右下角 -->
<zx-fab :content="items" horizontal="right" vertical="bottom" />

<!-- 左上角 -->
<zx-fab :content="items" horizontal="left" vertical="top" />

<!-- 右上角 -->
<zx-fab :content="items" horizontal="right" vertical="top" />

不同方向

<!-- 水平方向展开 (默认) -->
<zx-fab :content="items" direction="horizontal" />

<!-- 垂直方向展开 -->
<zx-fab :content="items" direction="vertical" />

自定义样式

<zx-fab 
  :content="items"
  :pattern="{
    color: '#333',
    selectedColor: '#ff6700',
    backgroundColor: '#f5f5f5',
    buttonColor: '#ff6700',
    iconColor: '#fff'
  }"
  :mainButtonSize="60"
  :itemButtonSize="50"
  :shadow="true"
  :borderRadius="30"
/>

不同动画效果

<!-- 缩放动画 (默认) -->
<zx-fab :content="items" animationType="scale" />

<!-- 淡入淡出动画 -->
<zx-fab :content="items" animationType="fade" />

<!-- 滑动动画 -->
<zx-fab :content="items" animationType="slide" />

自定义图标

<zx-fab :content="items" mainIcon="menu" />

禁用外部点击关闭

<zx-fab :content="items" :closeOnClickOutside="false" />

程序控制打开关闭

<template>
  <view>
    <button @click="openMenu">打开菜单</button>
    <button @click="closeMenu">关闭菜单</button>
    <zx-fab ref="fabRef" :content="items" />
  </view>
</template>

<script setup>
import { ref } from 'vue';

const fabRef = ref(null);

const openMenu = () => {
  fabRef.value.open();
};

const closeMenu = () => {
  fabRef.value.close();
};
</script>