精华内容
下载资源
问答
  • vue-contextmenu-源码

    2021-05-09 08:17:14
    vue-contextmenu Feature 右键菜单 多级子菜单 自定义item render 自定义替换右键菜单组件 开发文档 使用方式 引入依赖 npm i @shymean/vue-contextmenu -S // 引入默认菜单样式,如果使用自定义菜单组件则无需引入 ...
  • Vue----右键弹出菜单(vue-contextmenu)

    万次阅读 2020-03-23 14:06:16
    需求:点击右键,弹出菜单,查询资料,找到vue-contextmenu。 ...npm install vue-contextmenu --save 引入: import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu) 使用:...

    需求:点击右键,弹出菜单,查询资料,找到vue-contextmenu。
    项目地址:https://github.com/chIIC/vue-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>
    
    展开全文
  • npm install vue-contextmenu --save 2.main.js引入 import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu) 3.组件内使用 <ul class="nav taskPanel"> <li v-for="(item, index)...

    1.安装 

    npm install vue-contextmenu --save

    2.main.js引入

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

    3.组件内使用

      <ul class="nav taskPanel">
              <li
                v-for="(item, index) in taskList"
                :key="item.id"
              ><task-card
                  class="taskCard"
                  :taskItem="item"
                  @click.native="selectTaskClick(item,index)"
                  :class="{active:selectTaskIndex===index}"
                  @contextmenu.native="showMenu($event)"
                ></task-card>
              </li>
            </ul>
            <vue-context-menu
              :contextMenuData="contextMenuData"
              @modifyTask="modifyTask"
              style="background: #142957; box-shadow: 0 2px 2px 0 #0a43bc; border: 1px solid #00c5ff"
            ></vue-context-menu>
      // 菜单数据
          contextMenuData: {
            menuName: 'demo',
            // 菜单显示的位置
            axis: {
              x: null,
              y: null
            },
            // 菜单选项
            menulists: [{
              fnHandler: 'modifyTask', // 绑定事件
              icoName: 'icon iconfont icon-bianji2', // icon图标
              className: 'rightMentli',
              btnName: '修改业务名称' // 菜单名称
            }]
          },
     showMenu (e) {
          e.preventDefault()
          var x = e.clientX
          var y = e.clientY
          // Get the current location
          this.contextMenuData.axis = {
            x, y
          }
        },
    modifyTask () {
    }

    展开全文
  • 1. 效果 ...更多其他参考: github 参考地址 ...2.1 npm安装 vue-contextmenu npm install vue-contextmenu --save 2.2 main.js 引入 import VueContextMenu from 'vue-contextmenu' Vue.use(VueConte...

    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>
    
    
    展开全文
  • Vue右键菜单(vue-contextmenu)

    千次阅读 2021-02-05 09:07:02
    使用右键点击出现删除,以及更多操作菜单,...npm install vue-contextmenu --save main.js引入 import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu) 使用 <template> <div id="app

    使用右键点击出现删除,以及更多操作菜单,需要多个可以在注释//菜单选项处menulists下多添加几个对象,并且绑定需要响应的methods
    在这里插入图片描述
    安装

    npm install vue-contextmenu --save
    

    main.js引入

    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
                            style="
                                    width: 150px;
                                    background: #eee;
                                    margin-left: auto;
                            "
                            :contextMenuData="contextMenuData"
                            @deletedata="deletedata"
                    ></vue-context-menu>
            </div>
    </template>
    <script>
    export default {
            name: "app",
            data() {
                    return {
                            // 菜单数据
                            contextMenuData: {
                                    menuName: "demo",
                                    //菜单显示的位置
                                    axis: {
                                            x: null,
                                            y: null,
                                    },
                                    //菜单选项
                                    menulists: [
                                            {
                                                    fnHandler: "deletedata",
                                                    btnName: "删除当前数据",
                                            },
                                    ],
                            },
                    };
            },
            methods: {
                    showMenu() {
                            event.preventDefault();
                            var x = event.clientX;
                            var y = event.clientY;
                            // Get the current location
                            this.contextMenuData.axis = {
                                    x,
                                    y,
                            };
                    },
                    deletedata() {
                            console.log("delete!");
                    },
            },
    };
    </script>
    

    参考地址:https://blog.csdn.net/xyy1234567891/article/details/105047468/

    展开全文
  • npm install vue-contextmenu --save 引入: import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu) 使用: <template> <div id="app" @contextmenu="showMenu" style="width: 100px;...
  • 右键功能 插件vue-contextmenu 使用

    千次阅读 2020-04-09 17:07:19
    1. 安装依赖npm install vue-contextmenu --save 2.main.js 引入 // 右键插件 import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu) 3. //模板 <div @contextmenu.prevent="rightShow...
  • 已经安装vue-contextmenu,但是在引用的时候提示报错信息 在src文件目录下创建一个 shime-vue.d.ts文件,在里面写入 declare module 'vue-contextmenu' 其他模块找不到差不多一样,可以试试。
  • Contextmenu component for vue2 overview Use Setup install vue-contextmenu npm install vue-contextmenu --save Vue mount // mount with global import VueContextMenu from 'vue-contextmenu' Vue.use...
  • Vue2的右键弹出菜单(vue-contextmenu

    千次阅读 2017-07-21 08:14:41
    给大家推荐一个基于Vue2的右键弹出菜单插件,支持单一SPA页面以及可以在循环绑定中使用。 项目地址为:https://github.com/chiic/vue-...在原有基础上进行了重构,支持N节子菜单。效果图如下 配置简单,可以像vue-...
  • 1.安装 2.main.js引入 3.页面 绑定右键事件 菜单栏 ctx-show:菜单栏打开时的事件; ctx-hide:菜单栏隐藏时的事件; this.$refs.Menudisplay.hideMenu():隐藏菜单栏 效果图
  • vue-inifinite-contextmenu Vue2 无限级右键菜单组件,菜单内容,图标,点击事件可自定义 截图如下 开发安装 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build ...
  • /v-contextmenu-item> <v-contextmenu-item>菜单2</v-contextmenu-item> <v-contextmenu-item>菜单3</v-contextmenu-item> </v-contextmenu> <div v-contextmenu:...
  • 适用于Vue 2.0的ContextMenu组件。 中文| 安装 CDN约会 可通过获取最新版本的资源,在页面中追加相应的js和css文件即可。 <!-- 引入 Vue --> < script src =" https://unpkg.com/vue/dist/vue.js " > &...
  • Vue.use(Jquery_contextmenu) import 'jquery-contextmenu/dist/jquery.contextMenu.css' 注意: 在引入样式时可以点击进去jquery-contextmenu的安装目录中查找对应的css文件,然后按需引入即可 3、使用: &...
  • Vue-ECharts Apache ECharts (incubating) component for Vue.js. 中文版 Built upon Apache ECharts (incubating) v4.1.0+ and depends on Vue.js v2.2.6+. Installation npm (Recommended) $ npm install ...

空空如也

空空如也

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

vue-contextmenu

vue 订阅