使用vue-context自定义vue右键菜单

使用Ki-vue-context自定义vue右键菜单

Demo

预览

一个vue配色风格的右键菜单demo：

本地运行Demo

下载demo项目文件：demo on github

打包的demo已提供于/demo路径下，使用任意静态页面服务器即可运行。

$ cd ./demo
# 以live-server为例
$ npm i -g live-server
$ live-server

运行live-server后打开 http://localhost:8080 即可查看。

安装Ki-vue-context

首先安装Ki-vue-context插件。该插件提供了一个可自定义选项的右键菜单组件，支持fontawesome图标，自定义配色风格，自动页面边缘检测。

$ cd ./dir/to/your/project
$ npm i --save @kiyoaki_w/vue-context

使用方法

全局注册组件

在main.js中全局注册Ki-vue-context组件：

// main.js
import Vue from 'vue'
import kiContext from '@kiyoaki_w/vue-context'
Vue.use(kiContext)

按需导入fontawesome图标

在fontawesome网站查看所需图标，并在main.js文件中导入。此处以faArrowRight等4个箭头图标为例。

// main.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faArrowRight, faArrowLeft, faArrowUp, faArrowDown } from '@fortawesome/free-solid-svg-icons'
library.add(faArrowRight, faArrowLeft, faArrowUp, faArrowDown)
Vue.component('font-awesome-icon', FontAwesomeIcon)

在Vue实例中使用右键菜单组件

在Vue实例中使用右键菜单组件的代码如下：

<template>
  <!-- 在模板根元素上注册右键菜单的开启与关闭方法 -->
  <div id="app" @click="hideContextMenu()" @contextmenu.prevent="showContextMenu($event)">
    ...
    <!-- 在适当位置插入ki-context组件 -->
    <ki-context 
      ref="kiContext"
      minWidth='1em'
      maxWidth='15em'
      backgroundColor='#fbfbfb'
      fontSize='15px'
      textColor='#35495e'
      iconColor='#41b883'
      borderRadius='0.1'
    />  <!-- 以上属性都是可以自定义的 -->
    ...
  </div>
</template>

<script>
export default {
  methods: {
    showContextMenu (event){
      // 在items数组中定义所需的右键菜单选项
      let items = [
        {
          icon: "arrow-up",
          text: 'Default',
          click: () => {
            alert('Option0!')
          }
        },
        {
          icon: 'arrow-right',
          text: 'With divider',
          divider: true,
          click: () => {
            alert('Option2!')
          }
        },
        {
          icon: 'arrow-down',
          text: 'Disabled',
          disabled: true,
          click: () => {
            alert('Option3!')
          }
        },
      ];
      this.$refs.kiContext.show(event, items);
    },
    hideContextMenu (){
      this.$refs.kiContext.hide();
    }
  }
}
</script>

右键菜单的属性

属性	类型	必要	默认值	demo中的值
minWidth	String	No	10em	10em
maxWidth	String	No	18em	15em
backgroundColor	String	No	#ffffff	#fbfbfb
fontSize	String	No	inherit	15px
textColor	String	No	inherit	#35495e
iconColor	String	No	inherit	#41b883
borderRadius	String	No	null	0.1em

Items数组

items数组定义了右键菜单包含的选项，每个选项有如下属性：

属性	类型	必要
text	String	Yes
icon	String	No
click	function	No
divider	boolean	No
disabled	boolean	No