vue-context-menu

Vue 2.0 右键菜单组件，菜单内容可以随意自定义

安装

npm install @xunlei/vue-context-menu

在线Demo

https://xunleif2e.github.io/vue-context-menu/demo/dist

使用

1. 注册组件

方式1 利用插件方式全局注册

import VueContextMenu from '@xunlei/vue-context-menu'
import Vue from 'vue'

Vue.use(VueContextMenu)

方式2 局部注册

import { component as VueContextMenu } from '@xunlei/vue-context-menu'

export default {
  // ...
  components: {
    'vue-context-menu': VueContextMenu
  }
}

2. 模版语法

 

<template> 
    <context-menu class="right-menu" 
        :target="contextMenuTarget" 
        :show="contextMenuVisible" 
        @update:show="(show) => contextMenuVisible = show">
        <a href="javascript:;" @click="copyMsg">复制</a>
        <a href="javascript:;" @click="quoteMsg">引用</a>
        <a href="javascript:;" @click="deleteMsg">删除</a>
    </context-menu>
</template>

data() {
    return {
      contextMenuTarget: document.body, //绑定的dom
      contextMenuVisible: false,
    }
}

Props

参数	说明	类型	可选值	默认值
target	触发右键事件的元素	Element	-	-
show	是否显示右键菜单	Boolean	-	false

Events

事件名	说明	事件参数
update:show	右键菜单显示/隐藏时触发	是否显示

 

<style lang="scss">
   .right-menu {
      border: 1px solid #eee;
      box-shadow: 0 0.5em 1em 0 rgba(0,0,0,.1);
      border-radius: 1px;
      display: block;
      font-family: Microsoft Yahei,Avenir,Helvetica,Arial,sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      position: fixed;
      background: #fff;
      border: 1px solid rgba(0,0,0,.2);
      border-radius: 3px;
      z-index: 999;
      display: none;
      a {
        padding: 2px 15px;

        // width: 120px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        display: block;
        color: #1a1a1a;
        
      }
      user agent stylesheet
      a:-webkit-any-link {
        color: -webkit-link;
        cursor: pointer;
        text-decoration: underline;
      }
      a:hover {
        // background: #42b983;
        background: $color-primary;
        color: #fff;
      }
  }
</style>