contextmenu-vue

contextmenu developed by vue

Usage no npm install needed!

<script type="module">
  import contextmenuVue from 'https://cdn.skypack.dev/contextmenu-vue';
</script>

README

Contextmenu Vue

contextmenu developed by vue

install

yarn add contextmenu-vue

or

npm install contextmenu-vue

usage

<template>
  <div style="width:800px;height:800px" @contextmenu="handleContextmenu">
    <context-menu :show.sync="show" :menus="menus" @menuItemClick="handleMenuItemClick" :offset="contextMenuOffset">
      <template #create="menu">
        <div class="content">
          222{{menu.label}}
        </div>
      </template>
      <template #folder="menu">
        <div class="content">
          333{{menu.label}}
        </div>
      </template>
    </context-menu>
  </div>
</template>

<script>
import contextmenu from "vue-contextmenu"
export default {
  components: {
    ContextMenu,
  },
  data() {
    return {
      menus: [
        { 
          label: "刷新",  
          name: "refresh",
          children: [
            { 
              label: "刷新2"
            }
          ]
        },
        {
          label: "创建",
          name: "create",
          children: [
            { 
              label: "文件夹",
              name:"folder" 
            }
          ],
        },
      ],
      contextMenuOffset:{
        left:0,
        top:0
      },
      show:false
    };
  },
  methods:{
    handleContextmenu(e){
      e.preventDefault();
      this.contextMenuOffset.left = e.x;
      this.contextMenuOffset.top = e.y;
      this.show=true
    },
    handleMenuItemClick(menu){
      console.log(menu)
    }
  }
};
</script>

<style lang="less" scoped>
.content{
  padding: 2px 7px;
  user-select: none;
  &:hover {
    color: #fff;
    background: #1890ff;
  }
}
</style>

API

Props Description Type Default
show(sync) show or hidden context Booleam false
offset position of context Object { left: number, top:number} {left:0,top:0}
menus contextmenu list Array []

events

Events Name Description Arguments
menuItemClick Callback executed when the menu is clicked Function(clickedMenuInfo)