v-contextmenu的使用(右键菜单)

先来个自己改写的图:

v-contextmenu的使用(右键菜单)_第1张图片

代码:

 

结构:
v-contextmenu:contextmenu>

<v-contextmenu ref="contextmenu">
      <v-contextmenu-item ><i class="fa fa-search">i>上插入v-contextmenu-item>
      <v-contextmenu-item><i class="fa fa-search">i>下插入v-contextmenu-item>
      <v-contextmenu-item divider>v-contextmenu-item>
      <v-contextmenu-item><i class="fa fa-search">i>左插入v-contextmenu-item>
      <v-contextmenu-item><i class="fa fa-search">i>右插入v-contextmenu-item>
      <div class="flag">
          <span><i class="fa fa-star">i>span>
      div>
v-contextmenu>

 

 

/*右键菜单样式*/
.v-contextmenu{
    padding: 18px 0 5px 0;
}
.v-contextmenu .flag{
    width: 31px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.v-contextmenu .flag span{
    width: 65px;
    height: 24px;
    line-height: 33px;
    display: inline-block;
    text-align: center;
    transform: rotate(-40deg);
    background: #007fff;
    color: #fff;
    padding-right: 17px;
    position: relative;
    left: -20px;
    top: -14px;
}
.v-contextmenu .flag span i{
    color: #fff;
}
.v-contextmenu .v-contextmenu-item{
    width: 90px;
    height: 24px;
}
.v-contextmenu .v-contextmenu-item:hover{
    background: #f4f5f6;
    border-left: 3px solid #007FFF;
    color: #65778b;
    font-weight: 600;
}
.v-contextmenu .v-contextmenu-item:hover i{
    color: #65778b;
}
.v-contextmenu .v-contextmenu-item i{
    padding-right: 10px;
}

1、安装

# npm install v-contextmenu --save-dev

2、简单示例

import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'
Vue.use(contentmenu)

<template>
  <v-contextmenu ref="contextmenu">
    <v-contextmenu-item>菜单1v-contextmenu-item>
    <v-contextmenu-item>菜单2v-contextmenu-item>
    <v-contextmenu-item>菜单3v-contextmenu-item>
  v-contextmenu>

  <div v-contextmenu:contextmenu>右键点击此区域div>
template>

说明:
指令 :v-contextmenu:ref(v-contextmenu:contextmenu)

3、使用说明api

指令

v-contextmenu:ref

其中 ref 为一个 VContextmenu 的实例,例如

<v-contextmenu ref="contextmenu">
  <v-contextmenu-item>菜单v-contextmenu-item> v-contextmenu> <div v-contextmenu:contextmenu>div>

组件

VContextmenu

根组件

Attributes

参数 说明 类型 可选值 默认值
eventType 触发其显示的事件类型 String 事件名 contextmenu
theme 主题 String default / bright default

 

 

 

Methods

方法名称 说明 参数
show 显示菜单 { top: number, left: number }top 和 left 均为菜单相对浏览器窗口的值
hide 隐藏菜单 --

 

 

 

Events

事件名称 说明 回调参数
show 菜单显示时触发的事件 菜单组件的 vm
hide 菜单隐藏时触发的事件 菜单组件的 vm

 

 

VContextmenuItem

单个菜单,只能在 VContextmenuVContextmenuSubmenu 和 VContextmenuGroup 下使用

Attributes

参数 说明 类型 可选值 默认值
divider 是否为分隔符 Boolean true / false false
disabled 是否禁用 Boolean true / false false
autoHide 被点击后菜单是否自动隐藏 Boolean true / false true

 

 

 

 

Events

事件名称 说明 回调参数
click 菜单被点击时触发的事件 第一个参数是 vm, 第二个参数是该菜单的 event
mouseenter 鼠标移动到菜单上时触发的事件 第一个参数是 vm, 第二个参数是该菜单的 event
mouseleave 鼠标从菜单上离开时触发的事件 第一个参数是 vm, 第二个参数是该菜单的 event

 

 

 

VContextmenuSubmenu

子菜单,可嵌套使用

Attributes

参数 说明 类型 可选值 默认值
title 菜单名 String -- --
disabled 是否禁用 Boolean true / false false

 

 

 

Events

事件名称 说明 回调参数
mouseenter 鼠标移动到菜单上时触发的事件 第一个参数是 vm, 第二个参数是该菜单的 event
mouseleave 鼠标从菜单上离开时触发的事件 第一个参数是 vm, 第二个参数是该菜单的 event

 

 

 

Slots

Slot 名 说明
title 菜单名,和 title 属性二选一

 

 

VContextmenuGroup

菜组单,嵌套 VContextmenuItem 使用

Attributes

参数 说明 类型 可选值 默认值
maxWidth 最大宽度 Number / String

 

 

 

提供两种主题

默认

亮色

另外可自行根据 classnames 进行样式覆盖

  • v-contextmenu: 根元素
  • v-contextmenu--default: 根元素-默认主题
  • v-contextmenu--bright: 根元素-亮色主题
  • v-contextmenu-item: 单个菜单
  • v-contextmenu-item--hover: 单个菜单激活状态
  • v-contextmenu-item--disabled: 单个菜单禁用状态
  • v-contextmenu-divider: 分割线
  • v-contextmenu-group: 按钮组根元素
  • v-contextmenu-group__menus: 按钮组按钮容器
  • v-contextmenu-submenu: 子菜单容器
  • v-contextmenu-submenu__title: 子菜单标题
  • v-contextmenu-submenu__icon: 子菜单标题 icon
 

转载于:https://www.cnblogs.com/xuxiaoxia/p/8259985.html

你可能感兴趣的:(v-contextmenu的使用(右键菜单))