当前位置:首页 » 《资源分享》 » 正文

右键弹出菜单组件 vue-context-menu

7 人参与  2024年04月03日 15:55  分类 : 《资源分享》  评论

点击全文阅读


右键菜单组件有:vue-context-menu:、v-contextmenu:
这两种组件按照自己的需求进行选择

一、vue-context-menu

1、安装

npm install vue-context-menu --save

2、引入

全局引入:项目入口文件 main.jsimport VueContextMenu from 'vue-contextmenu'Vue.use(VueContextMenu)局部引入(如 user1.vue 文件)import VueContextMenu from 'vue-contextmenu'export default{    components: { VueContextMenu }}

3、使用

<template>    <div>        <vue-context-menu :contextMenuData="contextMenuData" @fn="fn" @fn1="fn1"></vue-context-menu>    </div></template><script>export default{    data(){        return {            contextMenuData: {                menuName: '',                axis: {                    x: null,                    y: null                },                menulists: [                    {                        fnHandler: 'fn',                        btnName: '点击此处调用 fn 函数'                    },                    {                        fnHandler: 'fn1',                        btnName: '点击此处调用 fn1 函数'                    },                ]            }        }    },    methods: {        fn(){},        fn1(){}    }}</script>

二、v-contextmenu

1、安装

npm i -S v-contextmenu@next或者 cdn 引入<!-- 引入 VContextmenu 组件 --><script src="https://unpkg.com/v-contextmenu@next/dist/index.min.js"></script><!-- 引入 VContextmenu 组件样式 --><link rel="stylesheet"  href="https://unpkg.com/v-contextmenu@next/dist/themes/default.css" />

2、引入

全局引入:入口文件 main.jsimport contextmenu from 'v-contextmenu'import 'v-contextmenu/dist/themes/default.css'Vue.use(contextmenu)局部引入:如在 user.vue 文件中引入import { directive, Contextmenu, ContextmenuItem } from 'v-contextmenu';import 'v-contextmenu/dist/themes/default.css'export default {  directives: {    contextmenu: directive,  },  components: {    [Contextmenu.name]: Contextmenu,    [ContextmenuItem.name]: ContextmenuItem,  }}

3、使用

<template>  <v-contextmenu ref="contextmenu">    <v-contextmenu-item @click="clickF1">菜单1</v-contextmenu-item>    <v-contextmenu-item divider></v-contextmenu-item>    <v-contextmenu-item>菜单2</v-contextmenu-item>    <v-contextmenu-item divider></v-contextmenu-item>    <v-contextmenu-item>菜单3</v-contextmenu-item>  </v-contextmenu>  <div v-contextmenu:contextmenu>右键点击此区域</div></template><script>import { directive, Contextmenu, ContextmenuItem } from 'v-contextmenu';import 'v-contextmenu/dist/themes/default.css'export default {  directives: {    contextmenu: directive,  },  components: {    [Contextmenu.name]: Contextmenu,    [ContextmenuItem.name]: ContextmenuItem,  },  methods: {    clickF1(){}  }}</script>

点击全文阅读


本文链接:http://zhangshiyu.com/post/90145.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 她的记忆停留在了最爱初恋的那年许欣柔楚临川完本_她的记忆停留在了最爱初恋的那年(许欣柔楚临川)
  • 全书浏览假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)_假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)全书结局
  • 童养夫让我给他的新欢出修复费(林嘉芝林思雅)_童养夫让我给他的新欢出修复费林嘉芝林思雅
  • 全文资助生女婿让我给他白月光付三千万月子中心钱(宋清玉宋雅)列表_全文资助生女婿让我给他白月光付三千万月子中心钱
  • 碎在时光里的谎言喻景宴秦明月完本_碎在时光里的谎言(喻景宴秦明月)
  • 旧爱剜心吻成灰席鄢之岑秋全书免费旧爱剜心吻成灰席鄢之岑秋全书免费
  • 结婚六年丈夫不碰我谁知儿子亲爹是寡头(纪清言傅司砚),结婚六年丈夫不碰我谁知儿子亲爹是寡头
  • 老公想换掉我的男胎,我笑他自不量力(宋薇于继业)_老公想换掉我的男胎,我笑他自不量力宋薇于继业
  • 给太子下了噬心蛊后,皇后找上门(小夭赵劼)全书浏览_给太子下了噬心蛊后,皇后找上门全书浏览
  • 豪门绝嗣!带球跑的夫人回来了!(谢长宴慕清杳)_豪门绝嗣!带球跑的夫人回来了!谢长宴慕清杳
  • 完美身材(李朵林之晴)_完美身材李朵林之晴
  • 离婚后,我和快穿系统绑定(白意秋陈荣周立慧)_离婚后,我和快穿系统绑定(白意秋陈荣周立慧)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1