niaogege / vue2.x-context-menu

Home Page:https://nsne.github.io/vue2.x-context-menu/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vue2.x-context-menu

vue2.x-context-menu在线示例

Install


npm install vue2.x-context-menu --save

//if you use yarn, you can

yarn add vue2.x-context-menu  

Usage

Usage1 (Global Component)

import Vue from 'vue'
import contextmenu from 'vue2.x-context-menu';
import 'vue2.x-context-menu/dist/css/context-menu.css';

Vue.use(contextmenu);

If you register it as a global component, you can use it directly in the template tag of any component of your project. like this:

        <div>
            <ContextMenu :value="{id: 1, name:'哈哈哈'}" @handle-show="handleShow">
                <Button type="primary">哈哈哈</Button>
                <div slot="content">
                    <ContextMenuItem @click="handleSelect" label="哈哈哈1" value="哈哈哈1"><span>icon1</span></ContextMenuItem>
                    <ContextMenuItem @click="handleSelect" label="哈哈哈2" value="哈哈哈2"></ContextMenuItem>
                </div>
            </ContextMenu>
        </div>

Usage2 (Local Component)

<template>
  <div>
        <div>
            <h2>result</h2>
            <h4>
                <label for="">menu:</label>
                <span>{{menu}}
                </span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label for="">operate:</label>
                <span> {{operate}}
                </span>
            </h4>
        </div>
        <br/>
        <div>
            <ContextMenu :value="{id: 1, name:'哈哈哈'}" @handle-show="handleShow">
                <Button type="primary">哈哈哈</Button>
                <div slot="content">
                    <ContextMenuItem @click="handleSelect" label="哈哈哈1" value="哈哈哈1"><span>icon1</span></ContextMenuItem>
                    <ContextMenuItem @click="handleSelect" label="哈哈哈2" value="哈哈哈2"></ContextMenuItem>
                </div>
            </ContextMenu>
        </div>
        <br/>
        <div>
            <ContextMenu :value="{id: 2, name:'呵呵呵'}" @handle-show="handleShow">
                <Button type="info">呵呵呵</Button>
                <div slot="content">
                    <ContextMenuItem @click="handleSelect" label="呵呵呵1" value="呵呵呵1" disabled><span>icon2</span></ContextMenuItem>
                    <ContextMenuItem @click="handleSelect" label="呵呵呵2" value="呵呵呵2"></ContextMenuItem>
                </div>
            </ContextMenu>
        </div>
  </div>
</template>

<script>
//only for local registration, if you register it as a global component, You do not have to do that
import contextmenu from 'vue2.x-context-menu'
import 'vue2.x-context-menu/dist/css/context-menu.css'
const {ContextMenu, ContextMenuItem } = contextmenu

export default {
  data() {
      return {
          menu: '',
          operate: ''
      }
  },
  methods: {
      handleShow: function(val){
          this.menu = val
          this.operate = ''
          console.log(this.menu)
      },
      handleSelect: function(val) {
          this.operate = val
          console.log(this.operate)
      }
  },
  //only for local registration, if you register it as a global component, You do not have to do that
  components: {
    ContextMenu,
    ContextMenuItem
  }

}

</script>

API

As you can see, there are two components, ContextMenu and ContextMenuItem

下面就用中文啦,作为**人,还是写点中文吧,再说英文写着也累

ContextMenu

props

属性 说明 类型 默认值
value 鼠标右击的父元素 Object或String ''
width 弹出窗口的宽度 String或Number 200

event

事件名 说明 返回值
handle-show 鼠标右击时触发,返回点击的元素本身,即value值,此时可自己清除operate 点击元素value

ContextMenuItem

props

属性 说明 类型 默认值
label 显示操作的标签 String或Number
value 点击菜单时的识别key,如删除操作可为delete String或Number
disabled 是否禁用 Boolean false

event

事件名 说明 返回值
click 点击某操作时触发,返回value属性

About

https://nsne.github.io/vue2.x-context-menu/


Languages

Language:JavaScript 86.1%Language:Vue 13.9%