v-contextmenu的使用(右键菜单)
生活随笔
收集整理的這篇文章主要介紹了
v-contextmenu的使用(右键菜单)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先來個自己改寫的圖:
代碼:
?
結構:<div class="wrap" 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>
</div>
?
?
/*右鍵菜單樣式*/ .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-dev2、簡單示例
import contentmenu from 'v-contextmenu' import 'v-contextmenu/dist/index.css' Vue.use(contentmenu)<template><v-contextmenu ref="contextmenu"><v-contextmenu-item>菜單1</v-contextmenu-item><v-contextmenu-item>菜單2</v-contextmenu-item><v-contextmenu-item>菜單3</v-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
單個菜單,只能在?VContextmenu,?VContextmenuSubmenu?和?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
| 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的使用(右键菜单)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: for each java_Java 实
- 下一篇: 2019年春季学期《软件工程》教学总结