vue左侧菜单栏,vue右键点击菜单

　　本文主要详细介绍vue对右键菜单栏的实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享vue的右键菜单栏的具体代码，供大家参考。具体内容如下

　　Vue的右键菜单栏和原生js类似，但是有两点需要了解。

　　1.1.contextmenu事件是鼠标右键单击事件。

　　2.阻止浏览器的默认右键单击事件

　　代码如下所示

　　//方法

　　rightShow() {

　　让菜单=这个。$refs.msgRightMenu

　　this.isPersoncontextMenus=true

　　var evt=event window.event

　　var client width=document . document element . client width document . body . client width；

　　var scroll left=document . document element . scroll left document . body . scroll left；

　　var client height=document . document element . client height document . body . client height；

　　var scroll top=document . document element . scroll top document . body . scroll top；

　　//将left和top分别赋给鼠标的位置；

　　menu . style . left=evt . pagex px ；

　　menu . style . top=evt . pagey px ；

　　//如果菜单放不下鼠标的右边，就改left的值。

　　if(evt . pagex 100 client width scroll left){//菜单应该在鼠标左侧；

　　var left 1=evt . pagex-100；

　　menu . style . left=left 1 px ；

　　}

　　//如果菜单放不下鼠标，就改top的值。

　　if(evt . pakey 100 client height scroll top){

　　var top 1=(evt . pagey-100)；

　　menu . style . top=top 1 px ；

　　}

　　menu . style . display= block ；

　　},

　　showNo(){

　　让菜单=这个。$refs.msgRightMenu

　　menu . style . display= none ；

　　}

　　//css样式供参考。根据自己的需求写风格。

　　#菜单{

　　列表样式：无；

　　边距：0px

　　填充：0px

　　位置：绝对；

　　显示：无；

　　宽度：100px

　　高度：100px

　　背景色：灰色；

　　}

　　#菜单li{

　　边距：0px

　　填充：0px

　　}

　　//html

　　Div @click.self=showNo//这是最外面的一个框，用self修改器不能和其他事件冲突。

　　type= text @ context menu . prevent= right show //这里的prevent修饰符可以直接阻止浏览器的默认行为。

　　ul id= menu ref= msgrightmenu v-show= is person context menus //is person context menus不要忘记在数据中定义这个变量。

　　李鱼香肉丝/李

　　李醋土豆丝/李

　　李麻辣小龙虾/李

　　李卤肉/李

　　/ul

　　/div

　　影响

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

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