javascript - Vue 组件 : Dropdown menu open inside div

Question

我正在为我的项目构建一个下拉组件。但是当我添加组件是一个响应表时，菜单在 div 中打开。

这是我的代码: https://codesandbox.io/s/fast-pond-pto57t?file=%2Fsrc%2FApp.vue

我怎样才能使下拉菜单附加到正文并设置一个 transform(x,y)

Answer 1

尝试使用 position: fixed !important;:

new Vue({
  el: "#demo",
  data() {
    return {
      showMenu: false,
    };
  },
})

.dropdown-menu {
  position: fixed !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div id="demo">
  <div class="table-responsive">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Joe Band</td>
          <td>
            <div class="dropdown">
              <button class="dropdown-toggle" @click="showMenu = !showMenu">
                Action
              </button>
              <ul class="dropdown-menu" :class="{ show: showMenu }">
                <li><a>Item 1</a></li>
                <li><a>Item 2</a></li>
                <li><a>Item 3</a></li>
              </ul>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>