vue 自定义右击菜单带二级菜单

vue 自定义右击菜单在网上找了一个，是全局的不好用，而且取不到被右击对象里面的数据，然后自己做了一个自定义的右击菜单，可以使用任何地方，还带二级菜单
先看效果如下：
最主要的代码，在需要显示右击菜单的dom上用如下代码，可以带上任何被右击对象里面的参数：
@contextmenu.prevent="rightClick($event,参数1,参数1)"
全部代码如下，新建html，复制以下代码双击就可以看效果。
<html>

<head>
  <meta charset="UTF-8">
  <script src="https://cn.vuejs.org/js/vue.js"></script>
<style lang="scss">
    .right-menu {
        border: 1px solid #eee;
        box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, .1);
        border-radius: 1px;
        display: block;
        font-family: Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: left;
        color: #2c3e50;
        position: fixed;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .2);
        border-radius: 3px;
        z-index: 999;
    }

    .right-menu span {
        padding: 2px 15px;
        width: 145px;
        height: 28px;
        line-height: 28px;
        text-align: left;
        display: block;
        color: #1a1a1a;

    }
    .right-menu span:hover {
        background: #42b983;
        color: #fff;
        cursor: pointer;
    }
    /***二级菜单CSS***/
    .position_re_zhxx{position: relative;}
    .display_none_zhxx{display: none; position: absolute; margin-left: 160px; margin-top:-30px; width: 180px; white-space: nowrap;}
    .position_re_zhxx:hover .display_none_zhxx{display: block !important;}
    .display_none_zhxx:hover{display: block;}
    
    .display_none_zhxx:after{content: '';clear:both; font-size:0px; overflow:hidden; line-height:0px; height:0px;}
    .icon_fas_zhxx{float: right; margin-right: 12px;line-height: 30px;}
</style>
</head>

<body>
  <div id="app">

<!--右击菜单Begin-->
<div class="right-menu" v-show="rightMenu.show" :style="{left:rightMenu.left+'px',top:rightMenu.top+'px'}">
        <span href="javascript:;" name="menuItem" @click="copyMsg">第一级菜单AAA</span>
        <span href="javascript:;" name="menuItem" @click="copyMsg">第一级菜单BBB</span>
       
        <span class="position_re_zhxx" href="javascript:;" name="menuItem" >菜单CC(带二级）<i >➤</i>
            <div class="right-menu display_none_zhxx">
                <span href="javascript:;" name="menuItem" @click="copyMsg">二级菜单111</span>
                <span href="javascript:;" name="menuItem" @click="copyMsg">二级菜单222</span>
            </div>
        </span>       
<hr>        
        <span href="javascript:;" name="menuItem" @click="copyMsg">菜单DDD</span>
        <span class="position_re_zhxx" href="javascript:;" name="menuItem" >菜单EE(带二级） <i >➤</i>
            <div class="right-menu display_none_zhxx">
                <span href="javascript:;" name="menuItem" @click="copyMsg">二级菜单111</span>
                <span href="javascript:;" name="menuItem" @click="copyMsg">二级菜单222</span>
                <span href="javascript:;" name="menuItem" @click="copyMsg">二级菜单333</span>
            </div>
        </span>
    </div>
<!--右击菜单End-->      


说明:只有特定的td表格中右击才显示菜单
    <table border="1">
      <thead>
        <tr>
          <th></th>
          <th v-for="i in getMaxLen">{{String.fromCharCode(64+i)}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,rolIndex) in excelList">
          <td>{{rolIndex+1}}</td>
          <td v-for="(arr,colIndex) in item" @contextmenu.prevent="rightClick($event,rolIndex,colIndex)">{{arr}}</td>
          <td v-for="i in getMaxLen-item.length"></td>
        </tr>
      </tbody>
    </table>





  </div>
  <script>
    var v1 = new Vue({
      el: '#app',
      data: {      
        rightMenu:{
              show:false,
              left:0,
              right:0
        },
        //以下用来测试的数据
        excelList: [["The Alliance", "HAPAG ", "SHA/NGB/YTN/SKU/QDO", null, null, null, null, null, null, null, null, null, null, "SSZ/PNG/NVT/ITJ/RIG/MVD/BUE", "3925", "4100", "-", "15", "21", "-", "1-7 NOV", null, "-", "-"], [null, "HAPAG ", "SHA/NGB/YTN/SKU/QDO", null, null, null, null, null, null, null, null, null, null, "SSZ/PNG/NVT/ITJ/RIG/MVD/BUE", "4025", "4200", "-", "15", "21", "-", "8-14 NOV", null, "-", "-"], [null, "HMM", "SHA/NGB/SKU/HKG", "1050", "123", "1173", "1050", "246", "1296", "22-31 th", null, null, null, "SSZ/PNG/IOA/ITJ/SPB/MVD/BUE", "4200", "4300", "2700", "12", "30", "15", "8-14 NOV", null, "-", "-"], [null, "ONE", "SHA/NGB/YTN/SKU/QDO/XMN", null, null, null, null, null, null, null, null, null, null, "SSZ/PNG/IOA/ITJ/NVT/RIG/SPB/MVD/BUE", "3931", "4062/4162", "2862", "15", "30", "30", "3-7 NOV", null, "50", "100"], [null, "ONE", "SHA/NGB/YTN/SKU/QDO/XMN", null, null, null, null, null, null, null, null, null, null, "SSZ/PNG/IOA/ITJ/NVT/RIG/SPB/MVD/BUE", "4031", "4162/4262", "2862", "15", "30", "30", "8-14 NOV", null, "-", "-"], [null, "YML", "SHA/NGB/YTN/QDO", "1000", "163", "1163", "1000", "326", "1326", "22-31th ", null, null, null, "SSZ/PNG/NVT/MVD/BUE", "3900", "4100", "-", "29", "21", "-", "1-14 NOV", null, "-", "-"], ["Ocean Alliance", "EMC", null, null, null, "0", null, null, "0"], [null, "COSCO ", "SHA/NGB/YTN/SKU/QDO/XMN/XNG/FZU", null, null, null, null, null, null, null, null, null, null, "SSZ/PNG/IOA/ITJ/NVT/RIO/RIG/SPB/MVD/BUE", "4100", "4100/4200", "2800", "0", "30", "30", "8-14 NOV", null, "0", "0"], [null, "OOCL", "SKU", null, null, null, null, null, null, null, null, null, null, "SSZ/PNG/IOA/ITJ/NVT/RIO/RIG/SPB/MVD/BUE", "4300", "4300", "3050", "0", "30", "21", "1-7 NOV", null, "-", "-"], [null, "CMA", "SHA/NGB/YTN/SKU/QDO", null, null, null, null, null, null, null, null, null, null, "SSZ/PNG/IOA/ITJ/NVT/RIO/RIG/SPB/MVD/BUE", "4100", "4200", "3100", "14", "25", "25", "1-14 NOV", "SPOT", "-", "-"], [null, "EMC", "SHA/NGB/SKU/HKG/QDO", null, null, null, null, null, null, null, null, null, null, "SSZ/PNG/IOA/ITJ/NVT/RIO/RIG/SPB/MVD/BUE", "4000", "4100", "3200", "0", "30", "21", "8-14 NOV", "*NGB $4000/4300", "-", "-"], [null, "PIL", "SHA/NGB/YTN/SKU/QDO", null, null, null, null, null, null, null, null, null, null, "SSZ/PNG/IOA/ITJ/NVT/RIO/SPE/MVD/BUE", "4150", "4250", "3000", "12", "30", "-", "8-14 NOV", null, "-", "-"]]
      },
      created: function () {

      }
      ,
      mounted: function () {
        let _this = this;
        document.addEventListener('click', function (e) {
  　　　//用来点击其他地方时隐藏菜单用的
        let targetName = e.target.getAttribute("name")
          if(targetName=="menuItem" && _this.rightMenu.show ) {
                    _this.rightMenu.show = true
                }else{
                    _this.rightMenu.show=false;
                }   
        })
      },

      computed: {
        getMaxLen() {
              var maxLen = 0;
              this.excelList.forEach(function (item) {
                if (item.length > maxLen) {
                  maxLen = item.length;
                }
              });
              console.log(maxLen)
              return maxLen;
            }
      }
      , methods: {
        
        copyMsg: function () {
          alert("copyMsg");
          this.rightMenu.show=false;
        },
        rightClick: function (e,rowIndex,colIndex) {
          console.log("rightClick=="+rowIndex+","+colIndex)
          this.rightMenu.left=e.clientX;
          this.rightMenu.top=e.clientY;
          this.rightMenu.show = true;
          console.log(this.menu)
          //e.cancelBubble = true;
        }
      }
    })
  </script>
</body>

</html>
posted @ 2020-11-11 10:18 为乐而来阅读(1657) 评论(0) 编辑收藏举报
刷新页面返回顶部
为乐而来

我们不生产代码，我们只是搜索引擎的搬运工,纯天然的弱咸性代码,让你运用自如。

vue 自定义右击菜单带二级菜单

公告
