vuetify.js - 如何使 Vuetify V Menu 右对齐？

Question

我需要使用“附加”选项制作右对齐的 v 菜单。

模板:

<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”元素下。它很奇怪。我该如何解决？

Demo

Answer 1

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

这是工作代码笔: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' },
    ],
  }),
})