vue下拉菜单组件封装,vue右键自定义菜单

　　这篇文章主要为大家详细介绍了某视频剪辑软件右键菜单的简单封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件实现右键菜单封装的具体代码，供大家参考，具体内容如下

　　封装一个简单的右键菜单，要求右键处出现菜单，点击除了菜单部分可以关闭菜单。

　　组件

　　模板

　　div class=上下文菜单 @ click= close v-show= show

　　ul class= menu main ref= menu main :style= { top:y，left: x }

　　插槽/插槽

　　/ul

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：上下文菜单，

　　已安装(){

　　文档。addevent侦听器(“上下文菜单”，this。上下文点击)；

　　},

　　data() {

　　返回{

　　x: 0px ，

　　y: 0px ，

　　显示：假

　　};

　　},

　　方法：{

　　//右键事件

　　上下文单击(e) {

　　//阻止默认事件

　　e。防止默认()；

　　this.show=true

　　这个。x=e . clientx px

　　这个。y=e . clienty px

　　},

　　关闭(e) {

　　//判断点击区域是否是menuMain的子元素如果不是则关闭菜单

　　如果(!这个参考文献。主菜单。包含(目标)){

　　this.show=false

　　}

　　}

　　}

　　};

　　/脚本

　　style lang=less 范围。上下文菜单{

　　位置：固定；

　　宽度：100vw

　　身高：100vh

　　top:0；

　　左：0;menuMain {

　　位置：固定；

　　z-index:100000；

　　列表样式：无；

　　边框半径：10px

　　填充：0;

　　边距：0;

　　背景色：# f5f5f5

　　溢出：隐藏；

　　李{

　　填充：20px

　　光标：指针；

　　：悬停{

　　背景色：# bdbdbd

　　}

　　}

　　}

　　}

　　/风格

　　使用

　　上下文菜单

　　李/李

　　李/李

　　/上下文菜单

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

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