Question

我正在学习Vuetifyjs，并尝试编写“文件资源管理器”。
有一个例子： codepen-snippet
我无法理解如何确保当您单击右侧图标时，“树”中的条目不会变为“活动”。
可能需要“停止”活动，但我不知道该怎么办。
告诉我
谢谢。

我要单击以下菜单：Menu

它变成了这样：need

现在不一样：now

摘要：

<div id="app">
  <v-app id="inspire">
    <v-content>
        <v-container >
          <v-layout justify-center>
    <v-card min-width=400>
    <v-treeview
      v-model="tree"
      :open="open"
      :items="items"
      activatable
      hoverable
      item-key="name"
      open-on-click
    >
      <template v-slot:prepend="{ item, open }">
        <v-icon v-if="!item.file">
          {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
        </v-icon>
        <v-icon v-else>
          {{ files[item.file] }}
        </v-icon>
      </template>

      <template v-slot:label="{item}">
        <v-hover v-slot:default="{ hover }">
         <div class="d-flex align-center">
          <span>{{item.name}}</span>
           <v-menu
              class="ml-auto"
              style="display: inline"
              :nudge-width="200"
              offset-y
          >
            <template v-slot:activator="{ on }">
              <!--
              -->
              <v-btn
                  v-show="hover"
                  icon
                  small
                  v-on="on"
                  class="pa-0 ma-0"
              >
                <v-icon small class="pa-0 ma-0">more_vert</v-icon>

              </v-btn>
            </template>

            <v-card>

              <v-list>

                <v-list-item @click="() => {}">
                  <v-list-item-action>
                    <v-icon>mdi-information-variant</v-icon>
                  </v-list-item-action>
                  <v-list-item-title>Info</v-list-item-title>
                </v-list-item>

                <v-list-item v-if="item.type === 'process' || item.type === 'state'" @click="() => {}">
                  <v-list-item-action>
                    <v-icon>power_settings_new</v-icon>
                  </v-list-item-action>
                  <v-list-item-title>Status</v-list-item-title>
                </v-list-item>

                <v-list-item @click="() => {}">
                  <v-list-item-action>
                    <v-icon>create</v-icon>
                  </v-list-item-action>
                  <v-list-item-title>Rename</v-list-item-title>
                </v-list-item>


                <v-list-item @click="() => {}">
                  <v-list-item-action>
                    <v-icon>file_copy</v-icon>
                  </v-list-item-action>
                  <v-list-item-title>Copy</v-list-item-title>
                </v-list-item>

                <v-list-item @click="() => {}">
                  <v-list-item-action>
                    <v-icon>mdi-folder-plus</v-icon>
                  </v-list-item-action>
                  <v-list-item-title>Create folder</v-list-item-title>
                </v-list-item>

                <v-list-item @click="() => {}">
                  <v-list-item-action>
                    <v-icon>delete</v-icon>
                  </v-list-item-action>
                  <v-list-item-title>Delete</v-list-item-title>
                </v-list-item>

              </v-list>

            </v-card>
          </v-menu>
         </div>

        </v-hover>
      </template
    </v-treeview>
        </v-card
        </v-layout justify-center>
        </v-container>
      </v-content>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    open: ['public'],
    files: {
      html: 'mdi-language-html5',
      js: 'mdi-nodejs',
      json: 'mdi-json',
      md: 'mdi-markdown',
      pdf: 'mdi-file-pdf',
      png: 'mdi-file-image',
      txt: 'mdi-file-document-outline',
      xls: 'mdi-file-excel',
    },
    tree: [],
    items: [
      {
        name: '.git',
      },
      {
        name: 'node_modules',
      },
      {
        name: 'public',
        children: [
          {
            name: 'static',
            children: [{
              name: 'logo.png',
              file: 'png',
            }],
          },
          {
            name: 'favicon.ico',
            file: 'png',
          },
          {
            name: 'index.html',
            file: 'html',
          },
        ],
      },
      {
        name: '.gitignore',
        file: 'txt',
      },
      {
        name: 'babel.config.js',
        file: 'js',
      },
      {
        name: 'package.json',
        file: 'json',
      },
      {
        name: 'README.md',
        file: 'md',
      },
      {
        name: 'vue.config.js',
        file: 'js',
      },
      {
        name: 'yarn.lock',
        file: 'txt',
      },
    ],
  }),
})

Answer 1

这里发生的是您的click事件正在传播到其父元素，因此，当您单击该图标以显示菜单时，它还会触发您的父元素（即文件或文件夹容器）的click事件。您可以在第44行中将@click.stop添加到v-btn中，如下所示：

<template v-slot:activator="{ on }">
              <!--
              -->
              <v-btn
                  v-show="hover"
                  icon
                  small
                  v-on="on"
                  class="pa-0 ma-0"
                  @click.stop
              >
                <v-icon small class="pa-0 ma-0">more_vert</v-icon>

              </v-btn>
            </template>

这将阻止事件传播到其父元素，您可以在此处进行尝试：codepen-snippet

现在，当您单击按钮时，它将显示您的菜单，并且不会更改文件或文件夹的活动或不活动状态。

Answer 2

要在单击时删除项目的蓝色突出显示，请从v-treeview组件中删除“可激活”：

<v-treeview
  v-model="tree"
  :open="open"
  :items="items"
  activatable
  hoverable
  item-key="name"
  open-on-click >

如何“停止”事件？

2 个答案: