如何将 v 菜单置于所选项目的中心？ （Vuetify、Vue2）

Question

我使用 v 菜单有一长串可选择的项目。我想使用 v-list-item-group 将列表置于所选项目的中心。然而，当在 v 菜单上使用“auto”属性时，可以通过例如调整菜单的位置。右推似乎被打破了。我想将菜单放置在文本字段下，但 auto 属性将其移动到文本字段的顶部。

是否有另一种方法可以在不使用 auto 道具的情况下将列表集中在所选项目上，以便我保持所需的位置？ 或者 使用 auto 道具时如何修复菜单的位置？

我尝试通过顶部、左侧等设置位置，但由于位置是绝对的并且菜单附加到文档（由于技术原因我们不能使用 Attach 属性），因此必须为每个列表计算位置（我们在同一页面上有多个这样的列表），我似乎无法访问 vuetify 的预先计算的位置并向它们添加更多像素。 我还尝试使用向右微移和底部微移。 nudge-right 不执行任何操作，而 nudge-bottom 不准确，由于某种原因，它仅适用于四分之一的项目。 我觉得我错过了一些东西，因为这是非常基本的东西，vuetify 不应该让这变得如此困难，所以请启发我。 ：D

Answer 1

您可以通过根据触发元素（如您的

v-menu

）的位置手动计算

v-text-field

的位置来实现所需的行为。这涉及使用 JavaScript 确定文本字段的位置并动态设置

nudge-top

的

nudge-left

和

v-menu

属性。这是一个简化的示例来说明这种方法：

HTML 模板：

<template>
  <v-container>
    <v-text-field
      ref="textField"
      label="Click me"
      @click="openMenu"
    ></v-text-field>

    <v-menu
      v-model="menu"
      :close-on-content-click="false"
      :nudge-top="nudgeTop"
      :nudge-left="nudgeLeft"
      offset-y
    >
      <v-list>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          @click="selectItem(item)"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </v-container>
</template>

Vue 组件脚本：

<script>
export default {
  data: () => ({
    menu: false,
    items: [{ title: 'Item 1' }, { title: 'Item 2' }, ...],
    nudgeTop: 0,
    nudgeLeft: 0
  }),

  methods: {
    openMenu() {
      this.menu = true;
      this.calculateMenuPosition();
    },

    calculateMenuPosition() {
      this.$nextTick(() => {
        const textFieldRect = this.$refs.textField.$el.getBoundingClientRect();
        this.nudgeTop = textFieldRect.height + 10; // Adjust 10 for additional spacing
        this.nudgeLeft = textFieldRect.left;
      });
    },

    selectItem(item) {
      // Handle item selection
    }
  }
};
</script>

说明：

• 文本字段引用：

  v-text-field

  有一个

  ref

  属性，它允许您在Vue组件中引用此元素。
• 菜单打开：单击文本字段会触发

  openMenu

  方法。此方法通过将

  v-menu

  设置为

  menu

  来打开

  true

  。
• 位置计算：

  calculateMenuPosition

  方法计算文本字段的位置，并相应地调整

  nudgeTop

  和

  nudgeLeft

  数据属性。

  this.$nextTick

  确保在获取元素的位置之前更新 DOM。
• 动态菜单定位：

  nudge-top

  上的

  nudge-left

  和

  v-menu

  道具动态绑定到计算的位置，确保菜单在文本字段下对齐。

注意：此方法可能需要根据您的具体布局和要求进行一些调整，尤其是在响应式设计中。您可能需要重新计算窗口大小调整或其他布局更改时的位置。