如何将 v-menu 居中放在所选项目上？（Vuetify、Vue2）-解网

问：

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

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

我尝试通过顶部、左侧等设置位置，但由于位置是绝对的并且菜单附加到文档（由于技术原因，我们不能使用附加属性），因此必须为每个列表计算位置（我们在同一页面上有多个这样的列表），我似乎无法访问 vuetify 预先计算的位置并为其添加更多像素。我还尝试使用右推和底推。nudge-right 不做任何事情，并且 nudge-bottom 不准确，由于某种原因，它只对 1 项中的 4 项有效。我觉得我错过了一些东西，因为这是太基本的东西了，vuetify 不应该让这件事变得如此困难，所以请启发我。:D

javascript vuejs2 vuetify.js vue-composition-api

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>

解释：

文本字段引用：有一个属性，它允许你在 Vue 组件中引用这个元素。v-text-fieldref
菜单打开：单击文本字段会触发该方法。此方法打开 by 设置为。openMenuv-menumenutrue
位置计算：该方法计算文本字段的位置，并相应地调整和数据属性。确保在获取元素位置之前更新 DOM。calculateMenuPositionnudgeTopnudgeLeftthis.$nextTick
动态菜单定位：和道具动态绑定到计算位置，确保菜单在文本字段下对齐。nudge-topnudge-leftv-menu

如何将 v-menu 居中放在所选项目上？（Vuetify、Vue2）

How do I center v-menu on the selected item? (Vuetify, Vue2)

评论

HTML 模板：

Vue 组件脚本：

解释：

评论