我在 Vuetify 中遇到了Tooltip 组件的奇怪行为。我在 Vuetify 的DataTable 组件中使用了这个组件,我在其中一个数据列中使用了一个插槽,我在其中添加了 Vuetify 的Button 组件,然后我在该按钮中使用了 Tooltip 组件。
问题定义:
工具提示行为如下:
附加信息:
我发现这种行为可能是由于在我的应用程序中,我已将此组件设置为通过以下方式保持活动状态
<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>
response.data
通过该loadData
方法从数据库中检索的示例:
[{
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"
}]
问题:
此工具提示行为是错误还是我必须为其设置一些其他设置?是否有一些解决方法,以便即使组件保持活动状态它也能正常运行?
如果有一些额外的信息,请询问。
似乎您有与此相同的问题:https : //github.com/vuetifyjs/vuetify/issues/2480但使用不同版本的 Vuetify。
按钮的工具提示属性有很多问题和请求,但现在解决方案可能类似于此修复程序:https : //github.com/vuetifyjs/vuetify/pull/2780:
show
在数据中定义(如果你使用 v-model 作为工具提示,我认为它应该设置为 false)@click="show = false"
v-if="show"
或v-model="show"
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句