v-contextmenu的使用(右键菜单)

本文介绍了一个基于Vue的右键菜单组件的使用方法,包括安装步骤、基本示例代码及详细的API说明。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先来个自己改写的图:

代码:

 

结构:
<div class="wrap"
v-contextmenu:contextmenu>

<v-contextmenu ref="contextmenu">
      <v-contextmenu-item ><i class="fa fa-search"></i>上插入</v-contextmenu-item>
      <v-contextmenu-item><i class="fa fa-search"></i>下插入</v-contextmenu-item>
      <v-contextmenu-item divider></v-contextmenu-item>
      <v-contextmenu-item><i class="fa fa-search"></i>左插入</v-contextmenu-item>
      <v-contextmenu-item><i class="fa fa-search"></i>右插入</v-contextmenu-item>
      <div class="flag">
          <span><i class="fa fa-star"></i></span>
      </div>
</v-contextmenu>
</div>

 

 

/*右键菜单样式*/
.v-contextmenu{
    padding: 18px 0 5px 0;
}
.v-contextmenu .flag{
    width: 31px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.v-contextmenu .flag span{
    width: 65px;
    height: 24px;
    line-height: 33px;
    display: inline-block;
    text-align: center;
    transform: rotate(-40deg);
    background: #007fff;
    color: #fff;
    padding-right: 17px;
    position: relative;
    left: -20px;
    top: -14px;
}
.v-contextmenu .flag span i{
    color: #fff;
}
.v-contextmenu .v-contextmenu-item{
    width: 90px;
    height: 24px;
}
.v-contextmenu .v-contextmenu-item:hover{
    background: #f4f5f6;
    border-left: 3px solid #007FFF;
    color: #65778b;
    font-weight: 600;
}
.v-contextmenu .v-contextmenu-item:hover i{
    color: #65778b;
}
.v-contextmenu .v-contextmenu-item i{
    padding-right: 10px;
}

1、安装

# npm install v-contextmenu --save-dev

2、简单示例

import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'
Vue.use(contentmenu)

<template>
  <v-contextmenu ref="contextmenu">
    <v-contextmenu-item>菜单1</v-contextmenu-item>
    <v-contextmenu-item>菜单2</v-contextmenu-item>
    <v-contextmenu-item>菜单3</v-contextmenu-item>
  </v-contextmenu>

  <div v-contextmenu:contextmenu>右键点击此区域</div>
</template>

说明:
指令 :v-contextmenu:ref(v-contextmenu:contextmenu)

3、使用说明api

指令

v-contextmenu:ref

其中 ref 为一个 VContextmenu 的实例,例如

<v-contextmenu ref="contextmenu">
  <v-contextmenu-item>菜单</v-contextmenu-item> </v-contextmenu> <div v-contextmenu:contextmenu></div>

组件

VContextmenu

根组件

Attributes

参数说明类型可选值默认值
eventType触发其显示的事件类型String事件名contextmenu
theme主题Stringdefault / brightdefault

 

 

 

Methods

方法名称说明参数
show显示菜单{ top: number, left: number }top 和 left 均为菜单相对浏览器窗口的值
hide隐藏菜单--

 

 

 

Events

事件名称说明回调参数
show菜单显示时触发的事件菜单组件的 vm
hide菜单隐藏时触发的事件菜单组件的 vm

 

 

VContextmenuItem

单个菜单,只能在 VContextmenuVContextmenuSubmenu 和 VContextmenuGroup 下使用

Attributes

参数说明类型可选值默认值
divider是否为分隔符Booleantrue / falsefalse
disabled是否禁用Booleantrue / falsefalse
autoHide被点击后菜单是否自动隐藏Booleantrue / falsetrue

 

 

 

 

Events

事件名称说明回调参数
click菜单被点击时触发的事件第一个参数是 vm, 第二个参数是该菜单的 event
mouseenter鼠标移动到菜单上时触发的事件第一个参数是 vm, 第二个参数是该菜单的 event
mouseleave鼠标从菜单上离开时触发的事件第一个参数是 vm, 第二个参数是该菜单的 event

 

 

 

VContextmenuSubmenu

子菜单,可嵌套使用

Attributes

参数说明类型可选值默认值
title菜单名String----
disabled是否禁用Booleantrue / falsefalse

 

 

 

Events

事件名称说明回调参数
mouseenter鼠标移动到菜单上时触发的事件第一个参数是 vm, 第二个参数是该菜单的 event
mouseleave鼠标从菜单上离开时触发的事件第一个参数是 vm, 第二个参数是该菜单的 event

 

 

 

Slots

Slot 名说明
title菜单名,和 title 属性二选一

 

 

VContextmenuGroup

菜组单,嵌套 VContextmenuItem 使用

Attributes

参数说明类型可选值默认值
maxWidth最大宽度Number / String

 

 

 

提供两种主题

默认

default

亮色

bright

另外可自行根据 classnames 进行样式覆盖

  • v-contextmenu: 根元素
  • v-contextmenu--default: 根元素-默认主题
  • v-contextmenu--bright: 根元素-亮色主题
  • v-contextmenu-item: 单个菜单
  • v-contextmenu-item--hover: 单个菜单激活状态
  • v-contextmenu-item--disabled: 单个菜单禁用状态
  • v-contextmenu-divider: 分割线
  • v-contextmenu-group: 按钮组根元素
  • v-contextmenu-group__menus: 按钮组按钮容器
  • v-contextmenu-submenu: 子菜单容器
  • v-contextmenu-submenu__title: 子菜单标题
  • v-contextmenu-submenu__icon: 子菜单标题 icon
 

转载于:https://www.cnblogs.com/xuxiaoxia/p/8259985.html

### 如何在 Vue 2 项目中使用 `v-contextmenu` `v-contextmenu` 是一个用于创建右键菜单的 Vue 插件,能够方便地集成到基于 Vue 的应用程序中。为了成功安装并配置此插件,在 Vue 2 中实现自定义上下文菜单功能,可以遵循如下指南。 #### 安装依赖 首先需要通过 npm 或 yarn 来安装 `v-contextmenu` 及其样式文件: ```bash npm install v-contextmenu --save ``` 或者如果偏好使用 yarn: ```bash yarn add v-contextmenu ``` #### 导入组件与注册全局指令 接着应该导入必要的模块并将它们应用至整个项目里去。可以在 main.js 文件内完成这一步骤: ```javascript // main.js import VContextmenu from 'v-contextmenu' import 'v-contextmenu/dist/index.css' Vue.use(VContextmenu) ``` 这段代码会把 `VContextmenu` 注册成全局可用的组件,并引入默认的主题样式表[^1]。 #### 创建简单的右键菜单实例 现在已经在项目中集成了该插件,下面展示怎样构建最基础版本的右键点击事件处理逻辑以及对应的菜单项结构: ```html <template> <div @contextmenu="handleContextMenu"> <!-- 需要绑定 contextmenu 事件 --> <!-- 显示位置由 handleContextMenu 函数控制 --> <v-contextmenu ref="contextMenu"> <v-contextmenu-item @click="doSomething">操作一</v-contextmenu-item> <v-contextmenu-item disabled>禁用选项</v-contextmenu-item> <v-contextmenu-submenu title="子菜单"> <v-contextmenu-item @click="anotherAction">子菜单中的动作</v-contextmenu-item> </v-contextmenu-submenu> </v-contextmenu> <p>在此处尝试右击鼠标...</p> </div> </template> <script> export default { methods: { handleContextMenu(event) { event.preventDefault(); this.$refs.contextMenu.show(event); }, doSomething() { alert('执行了某个特定的操作'); }, anotherAction(){ console.log('触发了另一个行为') } } } </script> ``` 上述模板部分展示了如何监听原生 DOM 上下文菜单 (`@contextmenu`) 并阻止浏览器默认行为;同时利用 `$refs` 访问 `<v-contextmenu>` 组件的方法来显示定制化的弹出式菜单。而 script 块则包含了响应不同菜单条目的回调函数定义。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值