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

先来个自己改写的图:

代码:

 

结构:
<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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`v-contextmenu`是Vue.js框架中的一个指令,用于在元素上绑定右键菜单。它允许你定义一个自定义的菜单,并在元素上触发右键点击事件时显示该菜单使用`v-contextmenu`指令的基本语法如下: ```html <template> <div v-contextmenu="showMenu"> Right-click me </div> </template> <script> export default { data() { return { showMenu: false }; } }; </script> ``` 在上述示例中,我们通过`v-contextmenu`指令将`showMenu`属性绑定到了元素上。当用户在该元素上右键点击时,`showMenu`属性的值会被设置为`true`,从而触发显示右键菜单。 你可以进一步扩展该指令,定义自定义的菜单组件,并在右键点击时显示该菜单组件。例如: ```html <template> <div v-contextmenu="showMenu"> Right-click me <my-context-menu v-if="showMenu" @close="showMenu = false"></my-context-menu> </div> </template> <script> import MyContextMenu from './MyContextMenu.vue'; export default { components: { MyContextMenu }, data() { return { showMenu: false }; } }; </script> ``` 在这个例子中,我们使用了一个名为`MyContextMenu`的自定义菜单组件。当`showMenu`为`true`时,该组件会被渲染显示。当用户点击菜单选项或其他区域时,我们可以通过`@close`事件将`showMenu`属性的值设置为`false`,从而隐藏菜单。 通过`v-contextmenu`指令和自定义的菜单组件,你可以实现一个自定义的右键菜单功能。具体的菜单样式和功能可以根据你的需求进行定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值