如何定位 VuetifyJS popover 组件？答案

【问题标题】：How to position the VuetifyJS popover component?如何定位 VuetifyJS popover 组件？
【发布时间】：2018-04-05 10:30:18
【问题描述】：

我将 VueJS 与 VuetifyJS 材料设计组件一起使用。如何将Vuetify popover component 定位在MORE 按钮下方？（目前它位于左上角，我猜是回退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>

【问题讨论】：

offset-y 而不是 offset-x?
@Traxo 刚试了一下，可惜没用。还是 x0,y0
尝试添加bottom 属性也许？你能在 codepen 上重现它吗？
好主意，这里是：codepen.io/anon/pen/WzaRbd?&editors=101 - 我认为问题是我需要在之外有 激活按钮 - 这部分是吗：<v-btn color="indigo" dark slot="activator">CUSTOM MENU as Popover</v-btn>
我认为你是对的，这可能是个问题。但是我不确定这是否受支持。来自docs：Remember to put the element that activates the menu in the activator slot.。因此，我相信您为使其正常工作所做的任何事情都是一种解决方法？也许其他人可以确认。（v-menu 道具之一是 activator，这表明它是可能的，但似乎不像描述的那样工作）

标签： javascript vue.js vuetify.js

【解决方案1】：

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

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

【讨论】：

你能在这里举个例子吗？