vue-context是Vue.js的灵活，可自定义的语义上下文菜单组件。

变更日志：

v6.0.0（08/04/2020）

• 重大更改：从入口点删除命名的导出
• 在样式表中更改子菜单V形字符代码

v5.2.0（08/02/2020）

• 补充：支持useScrollHeight以使用元素滚动高度而不是偏移高度。
• 补充：支持useScrollWidth以使用元素滚动宽度而不是偏移宽度。
• 补充：支持heightOffset和widthOffset来指定距屏幕边缘的距离。

安装和下载：

# NPM
$ npm install vue-context --save

更多功能：

• 适用于HTML无序列表（ul）。
• 自定义点击事件。
• 滚动或单击时自动关闭。

如何使用它：

1.安装后导入vue-context组件。

import Vue from 'vue';
import VueContext from 'vue-context';
// 或导入
import { VueContext } from 'vue-context';

2.导入所需的样式表。

@import  '~vue-context/src/sass/vue-context';
// 或
@import  '~vue-context/dist/css/vue-context.css';

3.将基本上下文菜单附加到您的元素。

<div id="app">
  <div>
    <p @contextmenu.prevent="$refs.menu.open">
      Right click on me
    </p>    
  </div>
  <vue-context ref="menu">
    <li>
      <a @click.prevent="onClick($event.target.innerText)">Option 1</a>
    </li>
    <li>
      <a @click.prevent="onClick($event.target.innerText)">Option 2</a>
    </li>
  </vue-context>
</div>

new Vue({
    components: {
      VueContext
    },
    methods: {
      onClick (text) {
        alert(`You clicked ${text}!`);
      }
    }
}).$mount('#app');

4.所有可用的props ，用于自定义上下文菜单。

closeOnClick: {
  type: Boolean,
  default: true
},
closeOnScroll: {
  type: Boolean,
  default: true
},
lazy: {
  type: Boolean,
  default: false // lazy load
},
itemSelector: {
  type: [String, Array],
  default: () => ['.v-context-item', '.v-context > li > a']
},
role: {
  type: String,
  default: 'menu'
},
subMenuOffset: {
  type: Number,
  default: 10
},
tag: {
  type: String,
  default: 'ul' // 任何HTML标记
}

---

官网：https://github.com/rawilk/vue-context

演示：https://www.vue365.cn/code_demo.php?id=468

GitHub下载：https://github.com/rawilk/vue-context/archive/master.zip