uniapp可拖拽多样式浮动菜单

闲话

最近接到一个需要在小程序端和h5端加一个浮动菜单功能。由于只可意会的原因，该菜单可能需要扇形、竖直方向、水平方向展示。 如此常见功能，网上一搜不就一大把吗。但是仔细一搜（可能我搜得也不仔细），发现要么数据写死，要么没有多样式展示，要么拖拽区域不可配等问题。基于以上原因，自己写了一个。项目地址

效果展示

uniapp可拖拽多样式浮动菜单插件，支持在设置限制区域内拖动；支持左右扇形、上下左右直线样式；支持设置图片背和文字+背景色。

使用说明

```<script setup>
import QcSuspendBtn from '@/components/qc-suspendBtn/qc-suspendBtn.vue'
const suspen = reactive({
  openType: 'SectorLeft', //LineUp LineDown LineLeft LineRight SectorLeft SectorRight
  mainBtn: {
    size: 52,
    bgImg:
      'https://img0.baidu.com/it/u=3059636429,422513178&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300', // 按钮背景图仅支持网络图片 如使用文字 请使用text
    initX: 300,
    initY: 400,
  },
  childSize: 44, // 子按钮大小
  childBtns: [
    {
      bgImg: 'https://pp.myapp.com/ma_icon/0/icon_5294_1718792416/256', // 按钮背景图仅支持网络图片 如使用文字 请使用text
    },
    {
      bgImg: 'https://pp.myapp.com/ma_icon/0/icon_11648167_1719364763/256',
    },
    {
      bgImg: 'https://pp.myapp.com/ma_icon/0/icon_52645998_1719456750/256',
    },
  ],
  padding: 15,
})
const childClick = () => {}
</script>
<template>
  <QcSuspendBtn
      :mainBtn="suspen.mainBtn"
      :childSize="suspen.childSize"
      :childBtns="suspen.childBtns"
      :openType="suspen.openType"
      :padding="suspen.padding"
      @childClick="childClick"
    />
</template>

```js

交流反馈

如使用过程中有任何问题，或有一些好的建议，欢迎加入交流群：218199949