vue中如何自定义右键菜单详解

在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下：

  <li
  v-for="item in resourceList"
  :key="item.id"
  @click="handleClickFolder(item)"
  @contextmenu.prevent="openMenu($event,item)"
  >
  </li>

在页面编写右键菜单内容:

<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
 <!-- <li v-if="rightClickItem.fileType==99" @click="handleClickFolder(rightClickItem)">打开</li>
 <li @click="handleDelete(rightClickItem)">删除</li>
 <li @click="handleDownloadFile(rightClickItem)" v-if="rightClickItem.fileType!=99">下载</li>
 <li @click="handlePreviewFile(rightClickItem)" v-if="rightClickItem.fileType!=99">预览</li>
 <li @click="handleUpdate(rightClickItem)">编辑</li> -->
 <li>内容</li>
 </ul>

在data()中定义需要的变量属性

data() {
 return {
 visible: false,
 top: 0,
 left: 0
 }
}

观察visible的变化，来触发关闭右键菜单，调用关闭菜单的方法

 watch: {
 visible(value) {
 if (value) {
 document.body.addEventListener('click', this.closeMenu)
 } else {
 document.body.removeEventListener('click', this.closeMenu)
 }
 }
 }

在method中定义打开右键菜单和关闭右键菜单的两个方法

 openMenu(e, item) {
 this.rightClickItem = item;

 let x = e.clientX;
 let y = e.clientY;

 this.top = y;
 this.left = x;

 this.visible = true;
 },
 closeMenu() {
 this.visible = false;
 }

在style中写右键菜单的样式

.contextmenu {
 margin: 0;
 background: #fff;
 z-index: 3000;
 position: fixed;
 list-style-type: none;
 padding: 5px 0;
 border-radius: 4px;
 font-size: 12px;
 font-weight: 400;
 color: #333;
 box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.contextmenu li {
 margin: 0;
 padding: 7px 16px;
 cursor: pointer;
}

.contextmenu li:hover {
 background-color: rgb(3, 125, 243);;
 color: white;
}

参考文档地址

到此这篇关于vue中如何自定义右键菜单详解的文章就介绍到这了,更多相关vue自定义右键菜单内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 自定义右键样式的实例代码

    最近用python写了个小说程序的api,想着用 vue 做个系统管理数据,脑子里出现的是这个画面: 但是这种样式的管理后台已经做了太多了,已经审美疲劳,后面又想了一种类操作系统的UI界面: 主要是靠 双击 和 右键 来操作,可操作多个模态框,跟操作 windows 类似,接下来在里面拆出一个功能块来写一篇文章,就是 自定义系统默认的右键 . 自定义右键操作有五个步骤: 阻止 默认右键. 获取当前右键点击时的 x / y 坐标,及 id . 自定义右键菜单样式及内容,定位在指定的位置后显示. 返

  • vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerightmenu) 安装  npm install rightmenu --save-dev   开始 //main.js import vue from "vue"; import rightMenu from "rightMenu"; vue.use(rightMenu)

  • vue中如何自定义右键菜单详解

    在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" > </li> 在页面编写右键菜单内容: <ul v-show=&q

  • vue中的过滤器实例代码详解

    过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和  v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: <!-- 在双花括号中 --> {{ name | Upper }} <!-- 在 `v-bind` 中 --> <div v-bind:id="martin | Upper

  • 发布订阅模式在vue中的实际运用实例详解

    订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态. 比如addEventListener 这个api就是个发布订阅模式 如果用过vue的同学,可以把他类比于 watch 下面我们看一个例子 var observe={ fnsObj:{}, // 订阅方法 on:function(key,fn){ if(!observe.fnsObj[key]){ observe.fnsObj[key]

  • vue原生方法自定义右键菜单

    vue原生方法自定义右键菜单

    本文实例为大家分享了vue原生方法自定义右键菜单的具体代码,供大家参考,具体内容如下 1.在需要添加右键的页面,绑定contextmenu事件(阻止浏览器默认事件,添加自定义事件) <div @contextmenu.prevent.native="openMenu($event)">   .... </div> 2.在页面编写右键菜单的内容 <ul v-show="visible" :style="{left:left+'p

  • vue中使用codemirror的实例详解

    这篇文章在vue里使用codemirror遇到的问题,写的很不错,还有下载的方法,大家可以点击查看. 以下是自己使用过的,做出来的例子: 做出来的效果图: 记住使用之前要npm下载哦 npm install vue-codemirror --save main.js import { codemirror } from 'vue-codemirror' import 'codemirror/lib/codemirror.css' Vue.use(VueCodemirror) 再到组件中使用 im

  • vue中引入mxGraph的步骤详解

    第一步:下载npm包 npm install mxgraph --save 第二步:新建一个index.js文件 文件内容如下 import mx from 'mxgraph'; const mxgraph = mx({ mxImageBasePath: './src/images', mxBasePath: './src' }); // decode bug https://github.com/jgraph/mxgraph/issues/49 window.mxGraph = mxgraph

  • Vue中使用vux配置代码详解

    一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=https://registry.npm.taobao.org // 开始安装 npm run dev // 运行项目 二.想在已创建的Vue工程里引入vux组件 <1>. 在项目里安装

  • 在vue 中使用 less的教程详解

    1.安装 npm install --save-dev less less-loader npm install --save-dev style-loader css-loader 先在index.html页面head标签内插入这段代码 <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange'

  • 基于Vue中使用节流Lodash throttle详解

    在Vue中使用 Lodash.throttle 来做节流 在Vue中,有时需要对ajax请求提交进行节流操作.这时候,如果页面在请求成功之后会跳转,使用vue指令once或者加载一个loading遮罩禁止点击即可,但如果请求之后不跳转,并且loading不适用时,需要通过其他方式来实现节流,比如通过标识位判断等,这里我们着重说一下如何通过lodash.throttle来实现节流 lodash lodash是一个广受欢迎的js工具库,其中包含了各种各样的工具函数,方便开发时不需要反复造轮子,更关注

  • 封装一下vue中的axios示例代码详解

    在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御cSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库.如果还对axios不了解的,可以移步axios文档. 安装 npm install axios; // 安装axios 好了,下面开始今天的正文. 此次封装用以解决: (

随机推荐