1. Toy模板网首页
  2. > Toy博客

【vue+ElementUI】实现web端鼠标右击打开菜单

10月前 作者：wuchus 分类：Toy博客 阅读(51) 违法举报

这篇具有很好参考价值的文章主要介绍了【vue+ElementUI】实现web端鼠标右击打开菜单。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、背景

最近做的开源项目有个需求就是在ElementUI的NavMenu侧边栏中，实现鼠标右击打开菜单功能，今天实现了一下，做个记录。

鼠标右击打开菜单

二、解决思路

1.需求

  • 在鼠标右击的位置打开菜单
  • 点击菜单项即可关闭菜单
  • 点击菜单外关闭菜单
  • 菜单置于图层的最顶层
  • 菜单动态样式

2.思路

2.1.在鼠标右击的位置打开菜单

  1. 首先，该需求需要拦截浏览器的右击事件，更改为自定义监听事件，可使用@contextmenu.prevent直接绑定一个监听函数，它的作用就是拦截右击事件并触发绑定的监听事件。

  2. 其次，为了在右击的位置打开菜单，我们需要获取鼠标点击的位置；一般来说，若绑定的函数没有自定义参数，则可以直接使用默认的参数e来获取；若绑定的函数具有自定义参数，则需要定义$event来获取位置，即@contextmenu.prevent="rightClick(index, indexMeasure, $event)"。

  3. 最后，通过参数event可获取鼠标点击的横向X轴值和竖直Y轴值，然后使用固定定位来对菜单进行偏移，因为固定定位是相对于浏览器窗口，且获取的X和Y轴值也是相对于浏览器窗口的。

2.2.点击菜单项即可关闭菜单&&点击菜单外关闭菜单

该需求的实现原理其实就是通过监听全局的鼠标点击事件来进行控制，由于菜单使用v-if来进行控制，因此只需要监听到全局的鼠标点击事件中将其置为false即可。其实现方式即在App.vue中绑定一个mousedown函数，且通过vuex来进行通信（全局与侧边栏组件关系复杂，使用它更为方便）。代码如下：

<template>
  <div id="app" @mousedown="appMouseDown">
  	<!-- 这里是自己的代码 -->
  </div>
</template>

<script>
export default {
  methods: {
    appMouseDown() {
      this.$store.commit("changeShowRightMenu", false)
    }
  }
}
</script>

2.3.菜单置于图层的最顶层

该需求是为了避免在点击菜单项时，触发了其他元素绑定的监听函数。这其实跟图层有关，我们只需要将菜单置到顶层即可。使用的是z-index属性，代码如下：

.right-menu {
    width: 130px;
    position: fixed;
    z-index: 1000;
    background-color: white;
}

2.4.菜单的动态样式

该需求是对菜单的样式进行定义，不同项目不同需求，博主简单改了一下样式，并实现一个鼠标进入高亮的效果（类似ElementUI）。代码如下（注意，该代码是将菜单里面的一项封装为组件）：

<template>
    <div class="flex right-menu-item align-item-center pointer" @mouseover="handleOver" @mouseleave="handleLeave"
        :style="{ backgroundColor: bdColor, color: colorStr}">
        <i :class="icon"></i>
        <div style="width: 70%;" class="text-overflow-hidden margin-left-small">{{ name }}</div>
    </div>
</template>

<script>
export default {
    name: "RightMenuItemComponent",
    data() {
        return {
            bdColor: "white",
            colorStr: "var(--color-main-font)"
        }
    },
    props: ['icon', 'name'],
    methods: {
        handleOver() {
            this.bdColor = "#ecf5ff"
            this.colorStr = "var(--color-main)"
        },
        handleLeave() {
            this.bdColor = "white"
            this.colorStr = "var(--color-main-font)"
        }
    }
}
</script>

<style lang="scss" scoped>
.right-menu-item {
    padding: 3px 6px 3px 6px;
    width: calc(100% - 12px);
    height: 40px;
    text-align: start;
}

i {
    font-size: 25px;
    color: var(--color-main);
}
</style>

三、完整代码

<!-- 侧边栏 AsideComponent.vue -->

<template>
    <div style="width:100%; height:100%">
        <el-menu default-active="2" 
        active-text-color="#6E38F7" 
        style="height: 100%;" 
        :collapse="isCollapse"
        :collapse-transition="false">
            <!-- 侧边导航栏，自己的代码 -->
            <!-- 注意需要在菜单项上面绑定右击事件的拦截函数，使用div绑定 -->
            <div @contextmenu.prevent="rightClick(index, indexMeasure, $event)">
                <el-menu-item index="file1">
                    <template slot="title">
                        <i class="el-icon-document"></i>
                        <span slot="title" >file1</span>
                    </template>
                </el-menu-item>
            </div>
        </el-menu>
        <div v-if="showRightMenu" class="right-menu border-radius-little box-shadow" :style="{top: topNumber+'px', left: leftNumber+'px'}">
            <right-menu-component></right-menu-component>
        </div>
    </div>
</template>
 
<script>
import { mapState } from 'vuex'
import RightMenuComponent from './RightMenuComponent.vue'
export default {
    name: 'AsideComponent',
    data() {
        return {
            topNumber: 0,
            leftNumber: 0
        }
    },

    components: {
        RightMenuComponent
    },

    computed: {
        ...mapState({
            showRightMenu: (state) => state.menuState.showRightMenu
        })
    },

    methods: {
        rightClick(index, indexMeasure, e) {
            this.$store.commit("changeShowRightMenu", true)
            this.topNumber = e.pageY
            this.leftNumber = e.pageX
        }
    },
}
</script>

<style lang="scss" scoped>
.el-menu {
    width: 100%;
    border-right: none;
    text-align: start;
    text-justify: middle;
}
.right-menu {
    width: 130px;
    position: fixed;
    z-index: 1000;
    background-color: white;
}

i {
    font-size: 25px;
    color: var(--color-main);
}
</style>

<!-- 菜单组件 RightMenuComponent.vue -->

<template>
    <div style="width: 100%;" class="border-radius-little">
        <div style="width: 100%;" v-for="(item, index) in rightMenuList" :key="item.name">
            <right-menu-item
                :class="index == rightMenuList.length - 1 ? 'border-radius-bottom-little' : index == 0 ? 'border-radius-top-little bd-bottom' : 'bd-bottom'"
                :icon="item.icon" :name="item.name"></right-menu-item>
        </div>
    </div>
</template>

<script>
import RightMenuItem from './RightMenuItemComponent.vue'
export default {
    name: "RightMenuComponent",
    data() {
        return {
            rightMenuList: [{
                icon: "el-icon-document",
                name: "new File",
                id: "create"
            }, {
                icon: "el-icon-refresh-right",
                name: "refresh",
                id: "refresh"
            }, {
                icon: "el-icon-delete",
                name: "delete",
                id: "delete"
            }]
        }
    },
    components: {
        RightMenuItem
    }
}
</script>

<style lang="scss" scoped>
</style>

<!-- 菜单项组件 RightMenuItemComponet.vue -->

<template>
    <div class="flex right-menu-item align-item-center pointer" @mouseover="handleOver" @mouseleave="handleLeave"
        :style="{ backgroundColor: bdColor, color: colorStr}">
        <i :class="icon"></i>
        <div style="width: 70%;" class="text-overflow-hidden margin-left-small">{{ name }}</div>
    </div>
</template>

<script>
export default {
    name: "RightMenuItemComponent",
    data() {
        return {
            bdColor: "white",
            colorStr: "var(--color-main-font)"
        }
    },
    props: ['icon', 'name'],
    methods: {
        handleOver() {
            this.bdColor = "#ecf5ff"
            this.colorStr = "var(--color-main)"
        },
        handleLeave() {
            this.bdColor = "white"
            this.colorStr = "var(--color-main-font)"
        }
    }
}
</script>

<style lang="scss" scoped>
.right-menu-item {
    padding: 3px 6px 3px 6px;
    width: calc(100% - 12px);
    height: 40px;
    text-align: start;
}

i {
    font-size: 25px;
    color: var(--color-main);
}
</style>

// vuex
// 注意博主将其模块化
// menuState.js

export default {
    state: {
        showRightMenu: false
    },
    mutations: {
        changeShowRightMenu(state, val) {
            state.showRightMenu = val
        }
    }
}

// index.js

import Vue from 'vue'
import Vuex from 'vuex'
import menuState from './menuState'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    menuState
  }
})

<!-- App.vue -->

<template>
  <div id="app" @mousedown="appMouseDown">
  	<!-- 这里是自己的代码 -->
  </div>
</template>

<script>
export default {
  methods: {
    appMouseDown() {
      this.$store.commit("changeShowRightMenu", false)
    }
  }
}
</script>

四、注意事项

博主的代码中，标签属性class里的内容是题主自定义的CSS样式，若有需要可在题主的git仓库直接获取文件使用：

https://github.com/WuChuSheng1/skywalking-banyandb/tree/main/ui/src/assets

建议直接下载并在main.js中导入，避免产生一些非必要的错误。

五、总结

本文主要实现Web端鼠标右键打开菜单的功能，目前并无bug，后续考虑使用一些动画效果来提高使用体验度。文章来源地址https://www.toymoban.com/news/detail-487849.html

到了这里，关于【vue+ElementUI】实现web端鼠标右击打开菜单的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包