• Vue 中使用右键菜单


    一、前言

    老的项目中有使用右键菜单,在拿过来用的时候有些问题,又找了些新的组件进行对比,在这里记录下。

    二、组件对比

    v-contextmenu :这个组件是原型项目中使用的,在拿过来的使用的时候一直安装不成功,提示需要的依赖不能正确安装,于是就放弃了这个(GitHub 地址);
    vue-contextmenu:这个组件安装成功了,安装使用说明一直不成功,最后也放弃了(GitHub 地址);
    vue-context-menu:最后选择这个,使用也较简单(GitHub 地址),不过这个有几年没有维护了;

    三、使用

    1、安装:
    npm install vue-context-menu --save

    2、在项目中使用

    <template>
        <div @contextmenu.prevent="onContextShow()" />
        <Contextmenu ref="contextmenu" class="context-menu">
            <li v-show="contextmenuList.add" @click="addGroup(0)">添加</li>
            <li v-show="contextmenuList.edit" @click="editGroup">修改</li>
            <li v-show="contextmenuList.delete" @click="removeGroup">删除</li>
        </Contextmenu>
    </template>
    
    <script>
    // 直接在组件中引入使用
    import Contextmenu from 'vue-context-menu'
    
    export default {
       components: {
         Contextmenu
       },
       methods: {
            onContextShow(data) {
              this.$refs.contextmenu.open()
            },
        }
    }
    </script>
    <style lang="scss">
      .context-menu {
        .ctx-menu {
          min- 65px;
          font-size: 14px;
    
          li {
            padding: 5px 14px;
            text-align: center;
            cursor: pointer;
    
            &:hover {
              background-color: #409eff;
            }
          }
        }
      }
    </style>

    上面是整个代码的使用,在使用的过程中可以多层级,直接使用 li=》ul=》li 这样进行嵌套。

    样式就是要嵌套下组件的 class 就可以。

     
  • 相关阅读:
    python全栈学习--day57(响应式页面-@media介绍,移动端单位介绍,Bootstrap学习)
    网络编程-Socket介绍
    网络编程-五层协议详解
    python-封装
    python- 类的多态与多态性
    python-接口类与抽象类
    python-类的组合和使用
    python-类继承与重用
    python-面向对象编程小结
    python-属性的查找与绑定方法
  • 原文地址:https://www.cnblogs.com/zhurong/p/13299946.html
Copyright © 2020-2023  润新知