如何定位 VuetifyJS popover 组件？

Question

我将 VueJS 与 VuetifyJS material 设计组件一起使用。如何将 Vuetify popover component 放置在 MORE 按钮下方？（目前位置在左上角，估计是fall back x=0, y=0。）

按钮：

<button @click.prevent="openPopover">MORE</button>

Popover Vuetify 模板：

 <template>
  <div class="text-xs-center">
    <v-menu
      offset-x
      :close-on-content-click="false"
      :nudge-width="200"
      v-model="menu"
    >
      <v-btn color="indigo" dark slot="activator">Menu as Popover</v-btn>
      <v-card>
        <v-list>
            <v-list-tile-action>
              <v-btn
                icon
                :class="fav ? 'red--text' : ''"
                @click="fav = !fav"
              >
                <v-icon>favorite</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>
    </v-menu>
  </div>
</template>

JS:

    <script>
  export default {
    data: () => ({
      fav: true,
      menu: false,
      message: false,
      hints: true
    })
  }
</script>

Answer 1

我通过将弹出窗口代码放在下拉菜单中解决了这个问题。 API 中还有几个选项可以定位菜单的内容。

例子和API：https://vuetifyjs.com/en/components/menus

如何定位 VuetifyJS popover 组件？

How to position the VuetifyJS popover component?

javascript

vue.js

vuetify.js