灵活的可定制上下文菜单– vue-context

灵活的可定制上下文菜单– vue-context
插件名称 vue-context
发布时间 2020年5月7日
插件作者 rawilk

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标记
}