更新记录

1.0.2（2025-07-01） 下载此版本

更新文档

1.0.1（2025-04-24） 下载此版本

优化

1.0.0（2025-04-22） 下载此版本

初版

平台兼容性

uni-app

其他

x-contextual-menu 上下文菜单组件

简介

x-contextual-menu 是一个基于 Vue 的上下文菜单组件，支持长按触发，提供灵活的菜单定位和自定义样式功能。

功能特性

• 长按触发上下文菜单
• 智能定位，自动避开屏幕边界
• 支持自定义菜单内容
• 平滑的动画效果
• 响应式设计，适配不同屏幕尺寸

基础用法

默认菜单

<template>
  <x-contextual-menu 
    :menuList="menuItems"
    @menuClick="handleMenuClick"
    @close="handleClose">
    <view class="content">
      长按我显示菜单
    </view>
  </x-contextual-menu>
</template>

<script>
export default {
  data() {
    return {
      menuItems: ['复制', '粘贴', '删除']
    }
  },
  methods: {
    handleMenuClick(e) {
      console.log('点击菜单项:', e.value, '索引:', e.index)
    },
    handleClose() {
      console.log('菜单关闭')
    }
  }
}
</script>

自定义菜单内容

<template>
  <x-contextual-menu @close="handleClose">
    <view class="content">
      长按我显示自定义菜单
    </view>

    <!-- 自定义菜单内容 -->
    <template #menu>
      <view class="custom-menu">
        <view class="menu-item" @click="customAction1">
          <text>📋 复制</text>
        </view>
        <view class="menu-item" @click="customAction2">
          <text>📝 编辑</text>
        </view>
        <view class="menu-item danger" @click="customAction3">
          <text>🗑️ 删除</text>
        </view>
      </view>
    </template>
  </x-contextual-menu>
</template>

<script>
export default {
  methods: {
    customAction1() {
      console.log('执行复制操作')
    },
    customAction2() {
      console.log('执行编辑操作')
    },
    customAction3() {
      console.log('执行删除操作')
    },
    handleClose() {
      console.log('菜单关闭')
    }
  }
}
</script>

<style>
.custom-menu {
  background: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 20rpx rgba(0,0,0,0.3);
}

.menu-item {
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item.danger text {
  color: #ff4757;
}

.menu-item:active {
  background-color: rgba(0,0,0,0.1);
}
</style>

API 参考

Props

Events

Slots

样式定制

CSS 变量

组件支持通过 CSS 变量进行样式定制：

/* 全局样式定制 */
.x-contextual-menu {
  /* 自定义触发区域样式 */
}

.x-contextual-menu-mask {
  /* 自定义遮罩层样式 */
  background-color: rgba(0, 0, 0, 0.5);
}

.longpress-menu {
  /* 自定义菜单容器样式 */
  background: #f8f9fa;
  border-radius: 12rpx;
}

.menu-item {
  /* 自定义菜单项样式 */
  padding: 30rpx 40rpx;
}

主题定制示例

<template>
  <x-contextual-menu 
    class="dark-theme"
    :menuList="menuItems"
    @menuClick="handleMenuClick">
    <view class="trigger-area">
      深色主题菜单
    </view>
  </x-contextual-menu>
</template>

<style>
.dark-theme .longpress-menu {
  background: #2c3e50;
  border: 1rpx solid #34495e;
}

.dark-theme .menu-item text {
  color: #ecf0f1;
}

.dark-theme .menu-item:active {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>

高级用法

嵌套使用

<template>
  <view class="container">
    <x-contextual-menu 
      :menuList="['文件操作', '编辑操作']"
      @menuClick="handleParentMenu">
      <view class="parent-area">
        父级菜单区域

        <x-contextual-menu 
          :menuList="['子菜单1', '子菜单2']"
          @menuClick="handleChildMenu">
          <view class="child-area">
            子级菜单区域
          </view>
        </x-contextual-menu>
      </view>
    </x-contextual-menu>
  </view>
</template>

插件如果对你有帮助给个好评吧~