没有 JQuery 的 VueJS 中的弹出菜单？

Question

在this answer 中正是我正在寻找的东西。单击表格行时会弹出一个菜单。唯一的问题是它使用 JQuery...

所以我的问题是，没有 JQuery 也能做到这一点吗？也许与我正在使用的 VueJS 一起使用？

Answer 1

翻译例子

let rows = document.querySelectorAll("tr");
    let btnPane = document.getElementById("button-pane");
    document.active = '';
  
    if (window.NodeList && !NodeList.prototype.forEach) {
        NodeList.prototype.forEach = Array.prototype.forEach;
    }

    btnPane.addEventListener("mouseover", function() {
        btnPane.style.display = "block";
        if(document.active)
            document.active.style.backgroundColor = "lightblue";
    });
    btnPane.addEventListener("mouseleave", function() {
        btnPane.style.display = "none";
        if(document.active)
            document.active.style.backgroundColor = "";
    });

    rows.forEach(function(row) {
        row.addEventListener("click", function(e) {
            var posLeft = e.clientX + 10;
            var posBottom = this.offsetTop + this.offsetHeight+8;
            btnPane.style.top = posBottom + "px";
            btnPane.style.left = posLeft + "px";
            btnPane.style.display = "block";
            document.active = this;
        });
        row.addEventListener("mouseleave", function() {
            btnPane.style.display = "none";
        });
    });

    table {
        border-collapse: collapse;
    }

    th, td{
        border-bottom: 1px solid #aaa;
    }

    #mytable tbody tr:hover {
      background-color: lightblue;
    }

    .button-pane {
      display: none;
      position: absolute;
      float: left;
      top: 0px;
      left: 0px;
      background-color: lightblue;
      width: 150px;
      height: 30px;
      padding: 0px;
      text-align: center;
    }

    .button-pane button {
      display: inline;
      cursor: pointer;
    }

    <table id="mytable" border="1" width="100%">
      <thead>
        <tr>
          <td>HEADER 1</td>
          <td>HEADER 2</td>
          <td>HEADER 3</td>
          <td>HEADER 4</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Item 1</td>
          <td>a</td>
          <td>aa</td>
          <td>aaa</td>
        </tr>
        <tr>
          <td>Item 2</td>
          <td>b</td>
          <td>bb</td>
          <td>bbb</td>
        </tr>
        <tr>
          <td>Item 3</td>
          <td>c</td>
          <td>cc</td>
          <td>ccc</td>
        </tr>
      </tbody>
    </table>
<div id="button-pane" class="button-pane">
  <button id="button1">Button 1</button>
  <button id="button2">Button 2</button>
</div>
    </div>