更新记录

1.0.0（2024-06-21） 下载此版本

ml-fab 悬浮可拖拽按钮提交

平台兼容性

ml-fab

ml-fab介绍

可拖拽悬浮按钮 ml-fab，支持自定义插槽，点击可展开一个图标按钮菜单，可随意拖拽。

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

代码演示

不使用插槽，使用默认配置

<template>
  <ml-fab :fabOption="fabOption" @clickRow="clickRow" @trigger="trigger"></ml-fab>
</template>
<script setup >
  import { ref } from 'vue';
  const fabOption = ref({
    iconPath: "../../static/icons/ml-fab-icon.png",
    selectIconPath: "../../static/icons/ml-fab-icon-o.png",
    color: "#fff",
    selectColor: "#007aff",
    fontSize: 13,
    fabBackground: "#a5a5a5",
    list: [ // 最多支持配置 4 个
      {
        title: "收藏",
        icon: "../../static/icons/ml-fab-menu-item-m.png",
        selectIcon: "../../static/icons/ml-fab-menu-item-m-o.png"
      },
      {
        title: "搜索",
        icon: "../../static/icons/ml-fab-menu-item-s.png",
        selectIcon: "../../static/icons/ml-fab-menu-item-s-o.png"
      }
    ]
  });
  /**
   * 选中了菜单
   * @param row list中的配置项
   * @param index 对应list中的索引
   */
  const clickRow = (row, _index) => {
    uni.showToast({ title: row.title, icon: "none", mask: false });
  };
  /**
   * 打开/关闭 菜单弹框
   * @param open true/false
   */
  const trigger = (open) => {
    uni.showToast({ title: open ? '打开弹框' : '关闭弹框', icon: "none", mask: false });
  };
</script>

使用自定义插槽，自定义组件配置

<template>
  <ml-fab :fabOption="fabOption" @clickRow="clickRow" @trigger="trigger">
    <!-- 使用插槽，自定义fab组件：组件颜色 > 橙黄色 -->
    <template v-slot:fab="{ option }">
      <view style="background: #ffb727;width: 100%;height: 100%;text-align: center;">
          陌路
      </view>
    </template>
    <!-- 使用插槽，自定义list组件：list中的option组件颜色 > 蓝色【注意：使用v-slot:list时，v-slot:item将失效】 -->
    <template v-slot:list="{ list }">
      <view v-for="(item,index) in list" :key="index" @click="clickRow(item, index)">
        <view style="display: flex;color: blue;">
          {{item.title}}
        </view>
      </view>
    </template>
    <!-- 使用插槽，自定义list中的option组件：菜单组件颜色 > 红色【注意：使用v-slot:list时，v-slot:item将失效】 -->
    <template v-slot:item="{ item }">
      <view style="color: red;text-align: center;">
        <image :src="item.icon" style="width: 25px;height: 25px;"></image>
        {{ item.title }}
      </view>
    </template>
  </ml-fab>
</template>
<script setup>
    import { ref } from 'vue';
    const fabOption = ref({
    iconPath: "../../static/icons/ml-fab-icon.png",
    selectIconPath: "../../static/icons/ml-fab-icon-o.png",
    color: "#fff",
    selectColor: "#007aff",
    fontSize: 13,
    fabSlot: true, // 开启插槽配置
    listSlot: true, // 开启插槽配置
    itemSlot: true, // 开启插槽配置
    fabBackground: "#a5a5a5",
    position: "right",
    list: [ // 最多支持配置 4 个
      {
        title: "收藏",
        icon: "../../static/icons/ml-fab-menu-item-m.png",
        selectIcon: "../../static/icons/ml-fab-menu-item-m-o.png"
      },
      {
        title: "搜索",
        icon: "../../static/icons/ml-fab-menu-item-s.png",
        selectIcon: "../../static/icons/ml-fab-menu-item-s-o.png"
      }
    ]
  });
</script>

props

fabOption【组件配置项】

list[option]【组件配置项】

事件 Events