vue-context-menu

安装

npm install @xxllxx/vue-context-menu
或
yarn add @xxllxx/vue-context-menu

使用

全局注册

// src/main.js
import Vue from 'vue'
//...
import context from '@xxllxx/vue-context-menu'
// 全局注册
Vue.use(context)
// 重命名组件名称 默认 context-menu 和 context-menu-item
// Vue.use(context, { name: 'contextMenu', itemName: 'contextMenuItem' })

//...
//...

context-menu 属性方法

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----------------------------: | :----: | :-------------------: | :---------: | | mode | 触发方式 | String | click/contextmenu/all | contextmenu | | width | 菜单宽度 | String | — | 自适应 | | offset | 固定菜单位置，根据父级的偏移量 | Object | {x:120,y:20} | null |

context-menu-item 属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :------: | :------: | :----: | :----: | | lable | 显示文字 | —— | —— | | @click | 触发事件 | Function | —— | —— |

使用

直接添加到需要右键菜单的元素下

// src/view/home.vue
<template>
  <div>
    <div class="homeItem">
      1
      <context-menu width="120px">
        <context-menu-item @click="item2">
      	  <!-- 自定义摸版 -->
          <img src="/svg/tag.svg" />
          标签
        </context-menu-item>
        <context-menu-item @click="item2">
          <img src="/svg/wallet.svg" />
          钱包
        </context-menu-item >
        <context-menu-item @click="item1">
          <img src="/svg/package.svg" />
          包裹
        </context-menu-item >
        <context-menu-item @click="item1">
          <img src="/svg/logistics.svg" />
          物流
        </context-menu-item>
      </context-menu >
    </div>
    <div class="homeItem">
      2
      <context-menu width="120px">
        <context-menu-item @click="item2">2</context-menu-item>
      </context-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  methods: {
    item1() {
      alert(1)
    },
    item2() {
      alert(2)
    },
    item3() {
      alert(3)
    }
  }
}
</script>
<style scoped>
.homeItem {
  background: aqua;
  width: 120px;
  margin-top: 20px;
  height: 120px;
}
.menu-item img {
  margin-top: -1px;
}
</style>

效果