vue右键点击菜单,vue右键弹出菜单

　　这篇文章主要给大家介绍了关于某视频剪辑软件中如何自定义右键菜单的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

　　里

　　v-for=资源列表中的项目

　　:key=item.id

　　@click=handleClickFolder(item)

　　@上下文菜单。prevent= openMenu($ event，item)

　　/李

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

　　ul v-show= visible :style= { left:left px ，top:top px } class=上下文菜单

　　！-Li v-if=右击项目。filetype==99 @ click= handleClickFolder(右击项目)打开/李

　　Li @ click=处理删除(右键单击项目)删除/李

　　Li @ click= handleDownloadFile(右击项目) v-if=右击项目。文件类型！=99下载/李

　　Li @ click= handlePreviewFile(右击项目) v-if=右击项目。文件类型！=99预览/李

　　Li @ click=处理更新(右键单击项目)编辑/李-

　　里内容/李

　　/ul

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

　　data() {

　　返回{

　　可见：假，

　　top: 0，

　　左侧：0

　　}

　　}

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

　　观察：{

　　可见（值){

　　如果（值){

　　文档。身体。addevent侦听器( click ，this.closeMenu)

　　}否则{

　　文档。身体。removeeventlistener( click ，this.closeMenu)

　　}

　　}

　　}

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

　　openMenu(e，item) {

　　这个。右键item=item

　　设x=e.clientX

　　设y=e .客户

　　这个。top=y；

　　这个。左=x；

　　this.visible=true

　　},

　　closeMenu() {

　　this.visible=false

　　}

　　在风格中写右键菜单的样式。上下文菜单{

　　边距：0;

　　背景：# fff

　　z指数：3000;

　　位置：固定；

　　列表样式类型：无；

　　填充：5px 0；

　　边框-半径：4px

　　字体大小：12px

　　字体粗细：400;

　　颜色：# 333;

　　box-shadow: 2px 2px 3px 0 rgba(0，0，0，0.3)；

　　}。上下文菜单李{

　　边距：0;

　　填充：7像素16像素

　　光标：指针；

　　}。李：悬停{

　　背景色：rgb(3，125，243)；

　　颜色：白色；

　　}

　　参考文档地址

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。