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
    评论
要实现右键菜单重命名功能,你可以使用el-tree组件的contextmenu事件和自定义右键菜单来实现。 首先,在el-tree组件上添加contextmenu事件监听器,可以使用@contextmenu指令或v-contextmenu指令。例如: ```html <el-tree @contextmenu="showContextMenu"> <!-- 树节点内容 --> </el-tree> ``` 接下来,在你的Vue实例中定义showContextMenu方法来处理右键菜单的显示和点击事件。在该方法中,你可以使用event对象的clientX和clientY属性来获取鼠标点击的位置,然后显示自定义的右键菜单。例如: ```javascript methods: { showContextMenu(event) { event.preventDefault(); // 阻止默认右键菜单弹出 const menu = document.getElementById('custom-menu'); // 获取自定义右键菜单元素 menu.style.left = event.clientX + 'px'; // 设置菜单的水平位置 menu.style.top = event.clientY + 'px'; // 设置菜单的垂直位置 menu.style.display = 'block'; // 显示菜单 // 其他逻辑... } } ``` 注意,上述代码中获取自定义右键菜单元素的方式使用了getElementById,所以需要在页面中定义一个id为custom-menu的元素作为自定义右键菜单的容器,并设置其样式为隐藏。例如: ```html <div id="custom-menu" style="display: none;"> <!-- 自定义右键菜单内容 --> </div> ``` 最后,你还需要在自定义右键菜单的内容中添加一个重命名选项,并为其添加点击事件监听器。在点击事件处理函数中,你可以通过获取当前选中的树节点,进行相应的重命名操作。例如: ```html <div id="custom-menu" style="display: none;"> <div @click="renameNode">重命名</div> </div> ``` ```javascript methods: { renameNode() { // 获取当前选中的树节点 const selectedNode = this.$refs.tree.getCurrentNode(); // 执行重命名逻辑... } } ``` 这样,当用户右键点击el-tree的节点时,会触发showContextMenu方法显示自定义右键菜单,点击重命名选项会执行renameNode方法进行重命名操作。你可以根据具体的业务需求,在renameNode方法中实现对节点的重命名逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值