Vue鼠标右键自定义

最新推荐文章于 2024-08-09 16:41:00 发布

猿陆柒

最新推荐文章于 2024-08-09 16:41:00 发布

阅读量960

点赞数

分类专栏： Vue 文章标签： vue js html

原文链接：https://www.cnblogs.com/luzt/p/11677660.html

版权

Vue 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了一种在Vue框架中实现自定义右键菜单的方法，包括如何通过鼠标右键事件触发显示菜单，并使用Vue的指令和数据绑定来控制菜单的可见性。此外，还介绍了如何设置菜单的位置以及如何在点击菜单项时执行相应的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <div style="width:100% ; z-index: inherit;position: relative;margin:0 auto ;"
      align="center" @contextmenu.prevent="rightClick">
      <img src="../../assets/userface.png" style="width: 10%; " />
    </div>

    <div v-show="menuVisible">
        <ul id="menu" class="menu">
            <li class="menu__item" style="margin-top: 3px;" @click="JumpcarDynamicQuery('检索1123')">检索1</li>
            <li class="menu__item" @click="JumpcarCarStaticQuery('检索2')">检索2</li>
            <li class="menu__item" @click="JumpDynamicQuery('检索3')">检索3</li>
            <li class="menu__item" @click="JumpcarPasserDynamicQuery('检索4')">检索4</li>
        </ul>
    </div>

  </div>
</template>
<script>
export default {
    data(){
        return{
            menuVisible:false
        }
    },
  methods: {
    JumpcarDynamicQuery(val){this.$message.success(val);},
    JumpcarCarStaticQuery(val){this.$message.success(val);},
    JumpDynamicQuery(val){this.$message.success(val);},
    JumpcarPasserDynamicQuery(val){this.$message.success(val);},
    rightClick(MouseEvent) {
        // 鼠标右击触发事件
        this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
        this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
        var menu = document.querySelector("#menu");
        menu.style.left = MouseEvent.clientX + "px";
        document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
        menu.style.top = MouseEvent.clientY - 50 + "px";
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      document.removeEventListener("click", this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    }
  }
};
</script>
<style scoped>
 .menu__item {
    display: block;
    line-height: 20px;
    text-align: center;
    margin-top: 3px;
}

.menu__item:hover{
    background: #999999;
}

.menu {
    height: 100px;
    width: 90px;
    cursor: default;
    /**
      auto(默认)      crosshair(十字)      default(鼠标系统原样)      hand(浏览器鼠标原样)      move(可拖动的样式【十字四边加箭头的】)
      help(系统原样鼠标加问号)      wait(转圈圈等待的样式)      text(文字样式)      w-resize(左右放大的样式)      s-resize(上下放大的样式)
      n-resize(上下放大的样式)      e-resize(左右放大的样式)      ne-resize(正比例【一三象限】对角放大)      sw-resize(正比例【一三象限】对角放大)
      se-resize(正比例【二四象限】对角放大)      nw-resize(正比例【二四象限】对角放大)      
      pointer(手指)
      **/
    position: absolute;
    border-radius: 10px;
    border: 1px solid #999999;
    background-color: #f4f4f4;
    z-index: 99999;
    padding-inline-start: 0px;
}
</style>