uni-app 有偿求开发自定义长按文字选中菜单

在uni-app中实现自定义长按文字选中菜单，你可以通过监听长按事件并结合自定义的弹出菜单组件来实现。以下是一个简化的代码示例，展示如何实现这一功能。

1. 页面布局（pages/index/index.vue）

<template>
  <view class="container">
    <text 
      class="selectable-text" 
      @longpress="onLongPress" 
      ref="selectableText"
    >
      长按选中这段文字
    </text>
    <custom-menu v-if="menuVisible" :position="menuPosition" @close="menuVisible = false" />
  </view>
</template>

<script>
import CustomMenu from '@/components/CustomMenu.vue';

export default {
  components: {
    CustomMenu
  },
  data() {
    return {
      menuVisible: false,
      menuPosition: { top: 0, left: 0 }
    };
  },
  methods: {
    onLongPress(event) {
      const rect = this.$refs.selectableText.getBoundingClientRect();
      const { top, left } = rect;
      this.menuPosition = {
        top: `${top + window.innerHeight / 2 - rect.height / 2}px`,
        left: `${left + window.innerWidth / 2 - rect.width / 2}px`
      };
      this.menuVisible = true;
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.selectable-text {
  font-size: 18px;
}
</style>

2. 自定义菜单组件（components/CustomMenu.vue）

<template>
  <view class="menu" :style="{ top: position.top, left: position.left }">
    <button @click="$emit('close')">选项1</button>
    <button @click="$emit('close')">选项2</button>
    <!-- 添加更多选项 -->
  </view>
</template>

<script>
export default {
  props: {
    position: {
      type: Object,
      required: true
    }
  }
};
</script>

<style>
.menu {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 1000;
}
button {
  display: block;
  width: 100%;
  margin-top: 10px;
}
</style>

说明

1. 页面布局：在index.vue中，定义了一个可长按的文本区域，并绑定了longpress事件来显示自定义菜单。
2. 自定义菜单组件：在CustomMenu.vue中，定义了一个简单的菜单组件，包含两个选项按钮。菜单的位置通过props传递。
3. 样式：基本的样式定义，使菜单居中显示并覆盖其他内容。

这种方式通过监听文本的长按事件，动态计算并显示自定义菜单的位置，从而实现自定义长按文字选中菜单的功能。你可以根据实际需求进一步扩展菜单的功能和样式。