当点击来自 v 按钮的链接时，Vuetify 工具提示会显示在左上角

Question

我在 Vuetify 中遇到了Tooltip 组件的奇怪行为。 我在 Vuetify 的DataTable 组件中使用了这个组件，我在其中一个数据列中使用了一个插槽，我在其中添加了 Vuetify 的Button 组件，然后我在该按钮内使用了 Tooltip 组件。

问题定义：

工具提示行为如下：

• 当我将鼠标移到按钮上并等待时，工具提示会正确显示。
• 当我在显示工具提示时单击按钮时，它会重定向到正确的页面，并且一切都按预期工作。
• 当我在未显示工具提示时单击按钮时，它会重定向到正确的页面，但工具提示随后会显示在页面的左上角并卡住。
• 当工具提示卡住时，我可以重定向到不同的页面，但工具提示仍在左上角。
• 当工具提示卡住时，我可以用我的表格 go 回到页面。 如果我将鼠标移动到最初用于重定向的按钮然后移开，则工具提示会消失。

附加信息：

我发现该行为可能是由于在我的应用程序中，我已将此组件设置为通过以下方式保持活动状态

<keep-alive :include="['PrintHistory']">
  <router-view />
</keep-alive>

当我删除PrintHistory字符串时，它的行为符合预期。

我还发现，当我将open-delay参数设置为更高的数字时，它会在左上角显示具有更高延迟的工具提示。

不管我重定向到哪个页面，问题仍然存在。

整个组件的代码：

<template>
  <div>
    <v-layout style="width:100%;" justify-space-between class="mb-0">
        <h2>{{ $t('print_history.title') }}</h2>
    </v-layout>
    <v-card class="elevation-1 my-1 pt-1" v-resize="onResize">

      <v-layout style="text-align: right;">
        <v-spacer></v-spacer>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          :label="$t('print_history.search')"
          class="ma-2"
        ></v-text-field>
      </v-layout>

      <v-data-table :headers="headers"
                    :items="rows"
                    :loading="loading"
                    :loading-text="$t('v_big_table.loading')"
                    :sort-by="'action_at'"
                    :sort-desc="true"
                    :search="search"
                    :page.sync="page"
                    @page-count="page_count = $event"
                    hide-default-footer
                    :items-per-page="computed_items_per_page">
        <template v-for="header in headers" v-slot:[`header.`+header.value]="{ header }">
          <span class="table_header" v-bind:key="`header_customization_`+header.value">{{ $t(header.text) }}</span>
        </template>
        <template v-slot:item.show_file="{ item }">
          <!-- The redirecting is not yet finished -->
          <v-btn :to="`/pdfjs-viewer`" icon small class="ma-0" color="primary">
            <v-tooltip top open-delay="600" :color="tooltip_bg_color">
              <template v-slot:activator="{ on, attrs }">
                    <v-icon
                      v-bind="attrs"
                      v-on="on">mdi-file-search-outline</v-icon>
              </template>
              <span class="tooltip">{{ $t('print_history.show_file') }} {{ item['path_to_file'].split("/")[item['path_to_file'].split("/").length-1] }}</span>
            </v-tooltip>
          </v-btn>
        </template>
      </v-data-table>
      <v-pagination
        v-model="page"
        :length="page_count"
        :total-visible="9"
      ></v-pagination>
    </v-card>
  </div>
</template>

<script>

/**
 * @typedef {Object} Sorter - stores information about column sorting
 * @property {string} field - unique name of the column to sort
 * @property {string} dir - direction of sorting: ascending ('asc'), descending ('desc')
 */

/**
 * @typedef {Object} Filter - stores information about column sorting
 * @property {string} field - unique name of the column to filter
 * @property {string} operator - operator defining the filter
 * @property {string} value - direction of sorting: ascending ('asc'), descending ('desc')
 * @property {string} color - color of the v-chip when the filter is shown
 */

import { utcTimeStamp, utcToLocal } from '../../../utils'

/**
 * Shows a history of printing arranged in a table with sorting and filtering capabilities.
 */
export default {
  name: "PrintHistory",
  data () {
    return {
      tooltip_bg_color: 'rgba(0,0,0,0.7)',
      err_msg: '',
      search: '',
      row_count: 0,
      total_row_count: 0,
      rows: [],
      rows_filtered: [],
      loading: true,
      page: 1,
      page_count: null,
      default_items_per_page: 13,
      window_size: {
        x: 0,
        y: 0
      },
      initial_sorters: [{field: 'action_at', dir: 'desc'}],
      headers: [
        {
          text: 'print_history.date_and_time',
          value: 'action_at',
          align: 'end'
        },
        {
          text: 'print_history.report_type',
          value: 'translated_report_type'
        },
        {
          text: 'print_history.user_id',
          value: 'user_id'
        },
        {
          text: 'print_history.user_name',
          value: 'user_name'
        },
        {
          text: 'print_history.state',
          value: 'translated_state'
        },
        {
          text: 'print_history.show_file',
          value: 'show_file',
          sortable: false,
        },
      ],
      last_update: null,
    }
  },
  computed: {
    computed_items_per_page() {
      return Math.max(Math.floor((this.window_size.y - 300)/48), 1)
    }
  },
  methods: {
    utcToLocal,
    /**
     * Loads data from database. Assigns loading error in case the data cannot be loaded.
     */
    loadData() {
      this.loading = true
      this.last_update = utcTimeStamp()
      let start_time = Date.now()
      this.$store.dispatch('getPrintHistory')
      .then((response) => {
        this.rows = this.transformData(response.data)
        this.row_count = this.rows.length
        this.total_row_count = response.data.total_row_count
        console.log("Total time:" + (Date.now() - start_time))
      })
      .catch(() => {
        this.err_msg = 'errors.error_loading_data'
        this.data = []
      })
      .finally(() => {
        this.loading = false
      })
    },
    /**
     * This will show file in a javascript PDF browser once implemented.
     * @param absolute_path absolute path to the file to be shown
     */
    showFile(absolute_path) {
      console.log(absolute_path)
    },
    /**
     * Processes data before saving them to rows.
     * @param {object[]} data_to_transform array of objects that should be processed
     * @return {object[]} array of objects that are formatted for the data table
     */
    transformData(data_to_transform) {
      let data_to_return = data_to_transform
      data_to_return.forEach((entry) => {
        entry['user_name'] = entry.user.name
        entry['path_to_file'] = entry.misc.path_to_file
        entry['action_at'] = this.$d(utcToLocal(entry.action_at), 'datetime')
        entry['translated_report_type'] = this.$t(`print_history.report_types.` + entry.report_type)
        entry['translated_state'] = this.$t(`print_history.states.` + entry.state)
      })
      return data_to_return
    },
    onResize() {
      this.window_size = {x: window.innerWidth, y: window.innerHeight}
    }
  },
  beforeMount() {
    this.loadData()
  },
  activated() {
    // check if the server has new data, refresh component data if true
    this.$store.dispatch('lastDataUpdate')
    .then((response) => {
      if (response.data > this.last_update) {
        this.loadData()
      }
    })
    // on error refresh anyway
    .catch(() => {
      this.loadData()
    })
  },
}
</script>

<style scoped>
.table_header {
  font-weight: bold;
  color: black;
}
</style>

通过loadData方法从数据库中检索到的response.data示例：

[{
   action_at: "2021-01-20T13:03:39.528843",
   id: "1",
   inventory_id: "1",
   reporty_type: "my_report_type",
   state: "archived",
   misc: {
     path_to_file: '/some/path/to/file.pdf'
   },
   user: {
     name: "John Doe",
     id: "123456",
     roles: {role_1: true}
   },
   user_id: "123456"
 },
 {
   action_at: "2021-01-20T13:05:39.528843",
   id: "2",
   inventory_id: "1",
   reporty_type: "my_other_report_type",
   state: "moved_to_print",
   misc: {
     path_to_file: '/some/path/to/file2.pdf'
   },
   user: {
     name: "Jane Doe",
     id: "123457",
     roles: {role_1: true}
   },
   user_id: "123457"
 }]

问题：

这个工具提示行为是一个错误还是我必须为其设置一些额外的设置？ 是否有一些解决方法，即使组件保持活动状态，它也能正常运行？

如果有一些额外的信息，请离开。

Answer 1

似乎您有与此相同的问题： https://github.com/vuetifyjs/vuetify/issues/2480但使用不同版本的 Vuetify。

对于按钮的工具提示属性有很多问题和请求，但目前解决方案可能类似于此修复： https://github.com/vuetifyjs/vuetify/pull/2780 ：

1. 在数据中定义show （我认为如果你使用 v-model 作为工具提示，它应该设置为 false）
2. 像这样将@click 事件添加到按钮： @click="show = false"
3. 对于工具提示，您有 2 个选项：添加v-if="show"或v-model="show"