vue-context

vue右键菜单组件
标签:
热度:
${contentInfo.pv} °C
更新时间:
2020-05-21 00:48:19

vue-context为Vue提供了一个简单而灵活的右键菜单组件。

安装

npm i vue-context

基本用法

导入组件并在您的应用程序中使用它

import Vue from 'vue';
import { VueContext } from 'vue-context';

new Vue({
    components: {
        VueContext
    },

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

接下来,向页面添加一个元素,该元素将触发右键菜单的出现,并且还将右键菜单添加至页面。

<div id="app">

    <div>
        <p @contextmenu.prevent="$refs.menu.open">
            Right click on me
        </p>    
    </div>

    <vue-context ref="menu">
        <li>
            <a href="#" @click.prevent="onClick($event.target.innerText)">Option 1</a>
        </li>
        <li>
            <a href="#" @click.prevent="onClick($event.target.innerText)">Option 2</a>
        </li>
    </vue-context>

</div>
${commentCount}条评论
头像
${item.username} 发表于 ${item.createTime} #${item.floor}
${item.content}