精华内容
下载资源
问答
  • 本篇文章主要介绍了vue2.0的contextmenu右键弹出菜单的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 点击右键弹出菜单 安装: npm install vue-contextmenu --save 引入: import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu) 使用: <template> <div id="app" @contextmenu=...

    点击右键,弹出菜单

    安装:

    npm install vue-contextmenu --save
    

    引入:

    import VueContextMenu from 'vue-contextmenu'
    Vue.use(VueContextMenu)
    

    使用:

    <template>
    <div id="app" @contextmenu="showMenu"
        style="width: 100px;height: 100px;margin-top: 20px;background: red;">
        <vue-context-menu :contextMenuData="contextMenuData"
            @home="home"
            @deletedata="deletedata"></vue-context-menu>
    </div>
    </template>
    <script>
    export default {
      name: 'app',
      data () {
        return {
        // 菜单数据
           contextMenuData: {
             menuName: 'demo',
             //菜单显示的位置
             axis: {
               x: null,
               y: null
             },
             //菜单选项
             menulists: [{
               fnHandler: 'home', //绑定事件
               icoName: 'fa fa-home fa-fw', //icon图标
               btnName: '回到主页' //菜单名称
             }, {
                 fnHandler: 'deletedata',
                 icoName: 'fa fa-minus-square-o  fa-fw',
                 btnName: '删除布局'
             }]
           }
      },
      methods: {
        showMenu () {
            event.preventDefault()
            var x = event.clientX
            var y = event.clientY
            // Get the current location
          this.contextMenuData.axis = {
            x, y
          }
        },
        homed () {
          alert("主页")
        },
        deletedata () {
          console.log('delete!')
        }
      }
    }
    </script>
    
    
    展开全文
  • 实现 div 右键弹出菜单列表,点击列表项执行操作 更多其他参考: github 参考地址 2. vue实现 2.1 npm安装 vue-contextmenu npm install vue-contextmenu --save 2.2 main.js 引入 import VueContextMenu from 'vue...

    1. 效果

    实现 div 右键弹出菜单列表,点击列表项执行操作
    更多其他参考: github 参考地址
    在这里插入图片描述

    2. vue实现

    2.1 npm安装 vue-contextmenu

    npm install vue-contextmenu --save
    

    2.2 main.js 引入

    import VueContextMenu from 'vue-contextmenu'
    Vue.use(VueContextMenu)
    

    2.3 参考页面

    <template>
      <div
        id="app"
        @contextmenu="showMenu"
        style="width: 100px;height: 100px;margin: 200px auto;background: red;"
      >
        <vue-context-menu :contextMenuData="contextMenuData" @savedata="savedata" @newdata="newdata"></vue-context-menu>
      </div>
    </template>
    <script>
    export default {
      name: "app",
      data() {
        return {
          // contextmenu data (菜单数据)
          contextMenuData: {
            // the contextmenu name(@1.4.1 updated)
            menuName: "demo",
            // The coordinates of the display(菜单显示的位置)
            axis: {
              x: null,
              y: null
            },
            // Menu options (菜单选项)
            menulists: [
              {
                fnHandler: "savedata", // Binding events(绑定事件)
                icoName: "fa fa-home fa-fw", // icon (icon图标 )
                btnName: "Save" // The name of the menu option (菜单名称)
              },
              {
                fnHandler: "newdata",
                icoName: "fa fa-home fa-fw",
                btnName: "New"
              }
            ]
          }
        };
      },
      methods: {
        showMenu() {
          event.preventDefault();
          var x = event.clientX;
          var y = event.clientY;
          // Get the current location
          this.contextMenuData.axis = {
            x,
            y
          };
        },
        savedata() {
          alert("保存");
        },
        newdata() {
          alert("New");
        }
      }
    };
    </script>
    
    
    展开全文
  • Vue2的右键弹出菜单vue-contextmenu)

    千次阅读 2017-07-21 08:14:41
    给大家推荐一个基于Vue2的右键弹出菜单插件,支持单一SPA页面以及可以在循环绑定中使用。 项目地址为:https://github.com/chiic/vue-...在原有基础上进行了重构,支持N节子菜单。效果图如下 配置简单,可以像vue-...
        
    给大家推荐一个基于Vue2的右键弹出菜单插件,支持单一SPA页面以及可以在循环绑定中使用。

    项目地址为:https://github.com/chiic/vue-...
    在原有基础上进行了重构,支持N节子菜单。效果图如下
    图片描述
    图片描述

    配置简单,可以像vue-router那样去配置一个options来设置选项。
    例如图1的配置项为:

    menulists: [
              {
                btnName: "选项1111111",
                icoName: "fa fa-home fa-fw",
                children: [
                  {
                    icoName: "fa fa-adn",
                    btnName: "选项1-1",
                    children: [
                      {
                        icoName: "fa fa-file",
                        children: [
                          {
                            icoName: "fa fa-android",
                            fnHandler: "Handler1",
                            btnName: "选项1-1-1"
                          }
                        ],
                        btnName: "选项1-1-1"
                      }
                    ]
                  }
                ]
              },
              {
                btnName: "选项2",
                children: [
                  {
                    fnHandler: "Handler5",
                    btnName: "选项2-1"
                  }
                ]
              },
              {
                btnName: "选项3",
                fnHandler: "Handler4"
              },
              {
                btnName: "选项4",
                disabled: true
              }
            ]
    展开全文
  • 1.安装 2.main.js引入 3.页面 绑定右键事件 菜单栏 ctx-show:菜单栏打开时的事件; ctx-hide:菜单栏隐藏时的事件; this.$refs.Menudisplay.hideMenu():隐藏菜单栏 效果图

    1.安装
    在这里插入图片描述
    2.main.js引入
    在这里插入图片描述
    3.页面
    绑定右键事件
    在这里插入图片描述
    菜单栏
    在这里插入图片描述
    在这里插入图片描述
    ctx-show:菜单栏打开时的事件;
    ctx-hide:菜单栏隐藏时的事件;
    this.$refs.Menudisplay.hideMenu():隐藏菜单栏

    效果图
    

    在这里插入图片描述

    展开全文
  • Vue----右键弹出菜单(vue-contextmenu)

    万次阅读 2020-03-23 14:06:16
    需求:点击右键弹出菜单,查询资料,找到vue-contextmenu。 项目地址:https://github.com/chIIC/vue-contextmenu 安装: npm install vue-contextmenu --save 引入: import VueContextMenu from 'vue-...
  • 整理文档,搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码,稍微整理精简一下做下分享。  1.事情对象 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
  • 在网页制作中经常使用到的右键弹出菜单, 右键弹出其实是一个LI列表,自己可以任意修改其中的内容.
  • Vuejs右键弹出菜单

    2020-03-21 17:58:35
    npm install @xunlei/vue-context-menu 二、修改main.js import VueContextMenu from '@xunlei/vue-context-menu' Vue.use(VueContextMenu) 三、使用 <context-menu class="right-menu" :target="...
  • vue 右键菜单插件 上下文菜单 (context-menu) A right-mouse menu plug-in for Vue.js 2+ 适用于Vue.js的鼠标右键菜单插件2+ 运行前 (Before run) This component needs Bootstrap and fontawesome. By default ...
  • 制作右键弹出菜单

    2011-02-24 10:42:00
    // 弹出右键菜单  CMenu menu; <br />  menu.LoadMenu(IDR_MENU_POP); <br />  CMenu *pSubMenu=menu.GetSubMenu(0); // 0表示是加载IDR_MENU_POP的第一列菜单 <br />  CPoint pt;...
  • Vue 2.0 右键菜单组件,菜单内容可以随意自定义
  • NULL 博文链接:https://penghuaiyi.iteye.com/blog/972512
  • 我这里实现的是,右键点击会出现操作图标,增加、删除按钮会弹出相应的操作弹窗。 效果展示: 部分代码实现: 因为项目里还有设计其他的业务逻辑,这里只展示了核心代码。 html: <a-c...
  • vue右键事件——显示iview菜单

    千次阅读 2018-12-12 18:36:14
    先取消右键的默认事件,获取当前点击的标签,显示菜单栏 e.preventDefault() this.$refs.contextMenu.$refs.reference = event.target //目的是让菜单栏显示在点击位置的附近 this.$refs.contextMenu....
  • 基于 vue 的鼠标右键菜单事件,本组件提供右键菜单的显示和隐藏,可自定义菜单,以及菜单列的样式
  • element+vue鼠标右键显示菜单

    千次阅读 2019-12-25 13:11:22
    // 先把模态框关死,目的是 第二次或者第n次右键鼠标的时候 它默认的是true this . menuVisible = true // 显示模态窗口,跳出自定义菜单栏 var menu = document . querySelector ( '#menu' ) ...
  • Vue----右键弹出菜单(vue-contextmenu)_xyy1234567891的博客-CSDN博客 本来想自己实现右键菜单,奈何水平不够(其实是懒得写) 写复制的时候往剪切板写数据遇到问题了,网上找也没找到怎么写,最后参考了Clipboard...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,170
精华内容 468
关键字:

vue右键弹出菜单

vue 订阅