快捷導(dǎo)航

Vue自定義指令實現(xiàn)點擊右鍵彈出菜單示例詳解

更新時間：2023年01月11日 10:56:54 作者：xiaoxiaok

這篇文章主要為大家介紹了Vue自定義指令實現(xiàn)點擊右鍵彈出菜單示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

一、實現(xiàn)思路

1.使用contextmenu事件

該需求需要攔截瀏覽器的右擊事件，更改為自定義監(jiān)聽事件，可使用@contextmenu.prevent直接綁定一個監(jiān)聽函數(shù)，它的作用就是攔截右擊事件并觸發(fā)綁定的監(jiān)聽事件。

其次，為了在右擊的位置打開菜單，我們需要獲取鼠標點擊的位置；一般來說，若綁定的函數(shù)沒有自定義參數(shù)，則可以直接使用默認的參數(shù)e來獲取；若綁定的函數(shù)具有自定義參數(shù)，則需要定義$event來獲取位置，即

@contextmenu.prevent="rightclick(index, indexMeasure, $event)

最后，通過參數(shù)event可獲取鼠標點擊的橫向X軸值和豎直Y軸值，然后使用固定定位來對菜單進行偏移，因為固定定位是相對于瀏覽器窗口，且獲取的X和Y軸值也是相對于瀏覽器窗口的。

  #menu {
      z-index: 999;
      display: none;
      position: fixed;
      width: 150px;
      border: 1px solid #ccc;
      background: #eee;
    }

2.點擊菜單之外的任意地方關(guān)閉菜單

在mounted里邊監(jiān)聽全局的點擊事件即可

mounted () {
    // 鼠標點擊其他位置時隱藏菜單
    document.onclick = function () {
      menu.style.display = 'none';
    }
}

3.菜單置于圖層的最頂層

該需求是為了避免在點擊菜單項時，觸發(fā)了其他元素綁定的監(jiān)聽函數(shù)。這其實跟圖層有關(guān)，我們只需要將菜單置到頂層即可。使用的是z-index屬性,如下

  #menu {
      z-index: 999;
      display: none;
      position: fixed;
      width: 150px;
      border: 1px solid #ccc;
      background: #eee;
    }

二、源代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用Vue自定義指令實現(xiàn)右鍵菜單</title>
  <script src="js/vue.js"></script>
  <style>
    /* 自定義右鍵菜單 */
    #menu {
      z-index: 999;
      display: none;
      position: fixed;
      width: 150px;
      border: 1px solid #ccc;
      background: #eee;
    }
    #menu ul {
      margin: 5px 0;
    }
    #menu li {
      height: 30px;
      line-height: 30px;
      color: #21232E;
      font-size: 12px;
      text-align: center;
      cursor: default;
      list-style-type: none;
      border-bottom: 1px dashed #cecece;
    }
    #menu li:hover {
      background-color: #cccccc;
    }
    .block {
      height: 300px;
      width: 400px;
      background-color: pink;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
  <div id="itany">
    <div style="position: relative;">
      <div class="block" v-rightclick>1</div>
      <div class="block" v-rightclick>2</div>
      <div class="block" v-rightclick>3</div>
      <div class="block" v-rightclick>4</div>
      <div class="block" v-rightclick>5</div>
      <div class="block" v-rightclick>6</div>
      <!-- 自定義鼠標右鍵菜單 -->
      <div id="menu">
        <ul>
          <li v-for="item in rightMenuList" @click="item.handler">
            {{item.text}}
          </li>
        </ul>
      </div>
    </div>
  </div>
  <script>
    Vue.directive('rightclick', function (el, binding) {
      el.oncontextmenu = function (e) {
        console.log('e.clientY', e.clientY)
        // console.log('e.clientX', e.clientX)
        e.preventDefault();
        menu.style.display = 'block';
        menu.style.left = e.clientX + 'px';
        menu.style.top = e.clientY + 'px';
      }
    });
    var vm = new Vue({
      el: '#itany',
      data: {
        rightMenuList: [
          {
            id: 0,
            text: "開通道",
            handler: () => {
              alert('通道開啟成功');
            }
          },
          {
            id: 1,
            text: "關(guān)通道",
            handler: () => {
              alert('通道關(guān)閉成功');
            }
          },
          {
            id: 2,
            text: "重啟通道",
            handler: () => {
              alert('通道重啟成功');
            }
          },
        ]
      },
      methods: {
      },
      mounted () {
        // 鼠標點擊其他位置時隱藏菜單
        document.onclick = function () {
          menu.style.display = 'none';
        }
      }
    });
  </script>
</body>
</html>

以上就是Vue自定義指令實現(xiàn)點擊右鍵彈出菜單示例詳解的詳細內(nèi)容，更多關(guān)于Vue自定義指令右鍵彈出菜單的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: