如何在 vuetify 中的列表项上获取 poopover

Question

如何在列表项上获取类似菜单的工具提示或弹出窗口

我有一个像这样的简单列表项

       items: [
            {  icon: 'mdi-dots-horizontal' },
            {  icon: 'mdi-format-italic' },
        ]

在vue中是这样构造的

        <v-list
                nav
                dense
              >
                <v-list-item-group
                  v-model="selectedItem"
                  color="primary"
                >
                  <v-list-item
                    v-for="(item, i) in items"
                    :key="i"
                  >
                    <v-list-item-icon>
                      <v-icon v-text="item.icon"></v-icon>
                    </v-list-item-icon>

                  </v-list-item>
                </v-list-item-group>
              </v-list>

对于 2nd 列表项，我希望我的结果如下图所示

如何在 vuetify 中实现这样的目标

Answer 1

它并不太复杂，你只需要将你的布局包裹在 <v-menu>

 <v-menu v-model="menu" :close-on-content-click="false" :nudge-width="200">
     <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="indigo"
          dark
          v-bind="attrs"
          v-on="on">
            Menu as Popover
        </v-btn>
      </template>
     <v-card>
         <v-list nav dense>
             <v-list-item-group v-model="selectedItem" color="primary">
                 <v-list-item v-for="(item, i) in items" :key="i">
                     <v-list-item-icon>
                         <v-icon v-text="item.icon"></v-icon>
                     </v-list-item-icon>
                  </v-list-item>
              </v-list-item-group>
          </v-list>
      </v-card>
  </v-menu>

对于脚本：

<script>
  export default {
    data() {
      return {
        menu: false,
        items: [{  icon: 'mdi-dots-horizontal' },
                {  icon: 'mdi-format-italic'   }]
      }
    }
  }
</script>

要查看完整教程，请单击 Here

如何在 vuetify 中的列表项上获取 poopover

How to get poopover on list item in vuetify

vue.js

vuetify.js