更新记录

1.0.0（2026-01-30） 下载此版本

• 双模式支持：
  • normal：长按直接弹出菜单（适用于气泡、卡片等整体操作）。
  • selection：长按出现原生光标，拖动选择文字后弹出菜单（支持 App 和 H5）。
• 智能定位：气泡自动判断显示在上方或下方，防止溢出屏幕。
• 原生体验：Selection 模式下屏蔽系统原生菜单，仅显示自定义菜单，支持拖动光标调整范围。
• 自定义菜单：支持配置任意菜单项，内置“复制”功能。

平台兼容性

uni-app(3.6.16)

x-long-press-menu 长按菜单组件

类似于微信消息的长按弹出菜单组件。支持两种模式：普通长按模式（整体操作）和 文本选择模式（自由选词）。

✨ 特性

• 双模式支持：
  • normal：长按直接弹出菜单（适用于气泡、卡片等整体操作）。
  • selection：长按出现原生光标，拖动选择文字后弹出菜单（支持 App 和 H5）。
• 智能定位：气泡自动判断显示在上方或下方，防止溢出屏幕。
• 原生体验：Selection 模式下屏蔽系统原生菜单，仅显示自定义菜单，支持拖动光标调整范围。
• 自定义菜单：支持配置任意菜单项，内置“复制”功能。

📦 引入

<script>
import xLongPressMenu from '@/components/x-long-press-menu/x-long-press-menu.vue';

export default {
  components: {
    xLongPressMenu
  }
}
</script>

📖 基本用法

1. 普通长按模式 (Normal Mode)

适用于整体操作，如消息气泡、图片、卡片等。

<x-long-press-menu 
  content="这是一段文本内容" 
  :menus="[{ text: '复制', value: 'copy' }, { text: '删除', value: 'delete' }]"
  @menu-click="handleMenuClick"
>
  <view class="bubble">长按我弹出菜单</view>
</x-long-press-menu>

2. 文本选择模式 (Selection Mode)

适用于文章详情、富文本等需要自由选择部分文字的场景。 注意：该模式依赖 renderjs，仅支持 App-Vue 和 H5 平台。小程序端请使用 Normal 模式。

<x-long-press-menu 
  mode="selection"
  :menus="[{ text: '复制', value: 'copy' }, { text: '搜索', value: 'search' }]"
  @menu-click="handleMenuClick"
>
  <view class="article">
    <text>长按这段文字，会出现选择光标，拖动选择后弹出菜单。</text>
  </view>
</x-long-press-menu>

⚙️ API

Props

Menu Item Format

[
  { text: '复制', value: 'copy' }, // value='copy' 会自动触发剪贴板复制
  { text: '转发', value: 'forward' },
  { text: '删除', value: 'delete' }
]

Events

⚠️ 注意事项

1. 平台兼容性：selection 模式使用了 renderjs 来获取 DOM 选区信息，因此不支持小程序。在小程序端建议强制使用 normal 模式。
2. 样式干扰：组件内部为了实现 App 端屏蔽系统菜单，对 CSS 的 user-select 做了特殊处理。尽量不要覆盖 .x-long-press-trigger 的 user-select 样式。
3. 层级问题：气泡菜单使用了 fixed 定位和 z-index: 999，通常能覆盖大部分元素。如有遮挡请检查父级 z-index。

💡 示例代码

请参考示例页面：/pages/long-press-demo/index.vue