@xxllxx/vue-context-menu v1.1.2

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 属性方法

context-menu-item 属性

使用

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

// 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>

效果