高效实现需求,避免重复造轮子。今天给大家分享的是,如何在最短的时候内实现右键菜单。方法也很简单,一个插件就可以搞定,话不多说,上效果图:
效果图
安装
npm install vue-contextmenujs
或
yarn add vue-contextmenujs
使用
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
代码实现
以element-ui
图标为例实现右键菜单,图标会为被渲染为<i class="icon"></i>
,代码如下:
<template>
<div style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"></div>
</template>
<script>
import Vue from 'vue'
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
export default {
methods: {
onContextmenu(event) {
this.$contextmenu({