Question

我正在使用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>

Answer 1

我通过将弹出代码放在下拉菜单中来解决问题。 API中还有一些选项可用于定位菜单内容。

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

如何定位VuetifyJS popover组件？

1 个答案: