如何使Vuetify VMenu右对齐？

Question

如何使Vuetify VMenu右对齐？

4

我需要创建一个带有“附加”选项的右对齐垂直菜单。

模板：


<div id="app">
  <v-app id="inspire">
    <h1>VMenu bug with "right" option</h1>
    <div class="place"></div>
    <div class="text-center">
      <v-btn
             color="primary"
             dark
             @click="show = !show"
             >
        Dropdown
      </v-btn>
    </div>
    <v-menu attach=".place" v-model="show" :right="true">
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
            @click=""
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
  </v-app>
</div>

JS：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    show: false,
    items: [
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me 2' },
    ],
  }),
})

我希望“.place”元素中的菜单右对齐。但是菜单是左对齐的。此外，菜单的顶部边框在“.place”元素下面，这很奇怪。我该如何解决？

演示

- izumeroot

你想要实现什么，能否附上屏幕截图或模拟图？你希望v-menu内的内容右对齐还是由于attach而遇到了v-menu位置的问题？ - chans

@chans 我尝试在使用“attach”选项时将菜单移动到页面的右边框，就像这样 https://ibb.co/ssHjYn1 - izumeroot

当您单击按钮时，是否希望显示类似的图像，并在页面的右边缘显示菜单？我说得对吗？ - chans

@chans，是的。这个目标选择“right”选项合适吗？ - izumeroot

“right”是另一回事，它不符合您的要求。 - chans

有什么不同？ - izumeroot

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tofandel · Answer 1

你差不多有了正确的解决方案，只是 right 和 left 属性的位置颠倒了。

所以你需要做的是：

<v-menu attach=".place" v-model="show" left>

- Samuel RIGAUD · Answer 2

我正在使用 Vuetify 3，我遇到了同样的问题。我通过使用以下方法解决了它

<v-menu location="bottom end">

请参见：
https://next.vuetifyjs.com/zh-Hans/components/menus/#location https://next.vuetifyjs.com/zh-Hans/components/overlays/#location-strategies

- chans · Answer 3

可以将v-menu的内容对齐到页面的右边框

这里是可工作的CodePen示例：https://codepen.io/chansv/pen/OJyjWmX

<div id="app">
  <v-app id="inspire">
    <h1>VMenu bug with "right" option</h1>
    <div>
      <div id="attachMenu" style="float: right;position: relative;width: 134px;left: 27px;"></div>
    </div>
    <div class="text-center">
      <v-btn
             color="primary"
             dark
             @click="show = !show"
             >
        Dropdown
      </v-btn>
    </div>
    <v-menu attach="#attachMenu" v-model="show" :right="true">
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
            @click=""
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    show: false,
    items: [
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me 2' },
    ],
  }),
})