插件名称 | vue-context |
---|---|
发布时间 | 2020年5月7日 |
插件作者 | rawilk |
vue-context是Vue.js的灵活,可自定义的语义上下文菜单组件。
v6.0.0(08/04/2020)
v5.2.0(08/02/2020)
# NPM
$ npm install vue-context --save
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标记
}