uniapp悬浮菜单

### 创建和使用悬浮菜单组件

#### 组件结构设计
为了实现在 UniApp 中创建一个可以点击触发显示的悬浮菜单，需要构建一个具备响应事件处理能力的 Vue 组件。此组件应能接收来自父级作用域的数据传递以及提供插槽让使用者自定义菜单项的内容。

#### 实现方案概述
通过 `ref` 和 `$refs` 来获取 DOM 节点的位置信息来动态调整气泡菜单展示方位；利用 CSS 定位技术确保气泡不会被其他 UI 元素所遮挡，并且可以通过配置参数控制其相对于目标元素的具体偏移量[^1]。

#### 编写悬浮菜单组件代码
下面是一个简单的悬浮菜单组件实例：

<template>
  <view :class="['popup-menu', { 'show': isShow }]" :style="{ top: position.top + 'px', left: position.left + 'px' }">
    <!-- 小三角 -->
    <view class="triangle"></view>
    <!-- 自定义菜单内容区域 -->
    <slot></slot>
  </view>
</template>

<script>
export default {
  props: ['target'],
  data() {
    return {
      isShow: false,
      position: {}
    };
  },
  methods: {
    show(event) {
      const targetRect = this.target.getBoundingClientRect();
      // 计算弹出位置逻辑...
      Object.assign(this.position, {
        top: targetRect.bottom,
        left: targetRect.left
      });
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    }
  },
  mounted() {
    document.addEventListener('click', (e) => !this.$el.contains(e.target) && this.hide());
  }
};
</script>

<style scoped>
.popup-menu {
  display: none;
  position: absolute;
}
.show {
  display: block;
}
.triangle:before {
  content: '';
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent white transparent;
  position: absolute;
  bottom: 100%;
  left: 20px;
}
/* 更多样式可以根据需求自行补充 */
</style>

上述代码片段展示了如何基于给定的目标节点计算悬浮菜单应该呈现的确切坐标，并设置了隐藏机制以便当用户点击文档中的其它地方时关闭菜单。

#### 使用方式说明
要在页面中引入并应用这个悬浮菜单组件，可以在模板部分像这样编写：

<button @click="menu.show($event)">打开菜单</button>
<popup-menu ref="menu" :target="triggerElementRef">
  <ul>
    <li v-for="(item,index) in items" :key="index">{{ item }}</li>
  </ul>
</popup-menu>

这里假设已经有一个名为 `items` 的数组用于填充菜单选项列表，而 `triggerElementRef` 则是指向触发器元素（即按钮）的一个引用对象。