perf: tooltip 全局添加 delay

This commit is contained in:
ibuler 2024-05-21 15:30:29 +08:00
parent 2d7fae677b
commit aed40c518e
18 changed files with 29 additions and 25 deletions

View File

@ -22,6 +22,7 @@
<el-tooltip
v-if="isSystemError && isLoading"
:content="$tc('Reconnect')"
open-delay="500"
placement="top"
>
<svg-icon icon-class="refresh" @click="onRefresh" />

View File

@ -17,7 +17,7 @@
<template v-if="showHasObjects">
<tr v-for="obj of iHasObjects" :key="obj.value" class="item">
<td style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
<el-tooltip :content="obj.label" effect="dark" placement="left" style="margin: 4px;">
<el-tooltip :content="obj.label" effect="dark" open-delay="500" placement="left" style="margin: 4px;">
<b>{{ obj.label }}</b>
</el-tooltip>
</td>

View File

@ -29,7 +29,7 @@
>
{{ option.group }}
</div>
<el-tooltip :key="option.name" :content="option.tip" :disabled="!option.tip" open-delay="1000" placement="top">
<el-tooltip :key="option.name" :content="option.tip" :disabled="!option.tip" open-delay="500" placement="top">
<el-dropdown-item
:key="option.name"
:command="[option, action]"
@ -56,7 +56,7 @@
v-bind="{...cleanButtonAction(action), icon: action.icon && action.icon.startsWith('el-') ? action.icon : ''}"
@click="handleClick(action)"
>
<el-tooltip :content="action.tip" :disabled="!action.tip" :open-delay="1000" placement="top">
<el-tooltip :content="action.tip" :disabled="!action.tip" :open-delay="500" placement="top">
<span>
<span v-if="action.icon && !action.icon.startsWith('el-')" style="vertical-align: initial">
<i v-if="action.icon.startsWith('fa')" :class="'fa ' + action.icon" />

View File

@ -9,7 +9,7 @@
>
<template v-if="data.label" #label>
<span>{{ data.label }}</span>
<el-tooltip v-if="data.helpTip" effect="dark" placement="right" popper-class="help-tips">
<el-tooltip v-if="data.helpTip" effect="dark" open-delay="500" placement="right" popper-class="help-tips">
<div slot="content" v-html="data.helpTip" />
<i class="fa fa-question-circle-o help-tip-icon" />
</el-tooltip>

View File

@ -6,7 +6,7 @@
:key="index"
style="display: inline-block; margin: 0 2px"
>
<el-tooltip :content="item.tip" :disabled="!item.tip" placement="top">
<el-tooltip :content="item.tip" :disabled="!item.tip" open-delay="500" placement="top">
<el-button
v-if="item.type ==='button' && !item.isVisible"
:type="item.el&&item.el.type"
@ -93,7 +93,7 @@
</div>
<div v-if="toolbar.hasOwnProperty('fold')" class="fold">
<el-tooltip :content="$tc('MoreActions')" placement="top">
<el-tooltip :content="$tc('MoreActions')" open-delay="500" placement="top">
<i
:class="[isFold ? 'fa-angle-double-right': 'fa-angle-double-down']"
class="fa"
@ -108,7 +108,7 @@
:key="index"
style="display: inline-block"
>
<el-tooltip :content="item.tip">
<el-tooltip :content="item.tip" open-delay="500">
<el-button
v-if="item.type ==='button'"
:disabled="item.disabled"

View File

@ -199,7 +199,7 @@ export default {
col.renderHeader = (h, { column, $index }) => {
return (
<span>{column.label}
<el-tooltip placement='bottom' effect='light' popperClass='help-tips'>
<el-tooltip open-delay='1000' placement='bottom' effect='light' popperClass='help-tips'>
<div slot='content' domPropsInnerHTML={helpTip}/>
<el-button style='padding: 0'>
<i class='fa fa-info-circle'/>

View File

@ -1,6 +1,6 @@
<template>
<span>
<el-tooltip v-if="shown" :disabled="!formatterArgs.hasTips" effect="dark" placement="bottom">
<el-tooltip v-if="shown" :disabled="!formatterArgs.hasTips" effect="dark" open-delay="500" placement="bottom">
<div slot="content" v-html="tips" />
<span :class="classes">
<i v-if="formatterArgs.showIcon && icon" :class="'fa ' + icon" />

View File

@ -1,6 +1,6 @@
<template>
<div>
<el-tooltip v-if="formatterArgs.hasTips" placement="bottom" effect="dark">
<el-tooltip v-if="formatterArgs.hasTips" effect="dark" open-delay="500" placement="bottom">
<div slot="content">
<template v-if="tipsIsArray">
<div v-for="tip of tips" :key="tip">

View File

@ -6,7 +6,7 @@
:key="index"
style="display: inline-block"
>
<el-tooltip :content="item.tip">
<el-tooltip :content="item.tip" open-delay="500">
<el-button
v-if="!item.isScrollButton || showScrollButton"
size="mini"

View File

@ -5,6 +5,7 @@
:manual="true"
class="item"
effect="dark"
open-delay="500"
placement="bottom-start"
>
<el-menu

View File

@ -2,22 +2,22 @@
<div class="navbar">
<ul class="navbar-right">
<li class="header-item header-icon">
<el-tooltip :content="$tc('SiteMessageList')" effect="dark">
<el-tooltip :content="$tc('SiteMessageList')" effect="dark" open-delay="500">
<SiteMessages />
</el-tooltip>
</li>
<li v-perms="['rbac.view_webterminal']" class="header-item header-icon">
<el-tooltip :content="$tc('WebTerminal')" effect="dark">
<el-tooltip :content="$tc('WebTerminal')" effect="dark" open-delay="500">
<WebTerminal />
</el-tooltip>
</li>
<li v-if="ticketsEnabled" class="header-item header-hover">
<el-tooltip :content="$tc('Ticket')" effect="dark">
<el-tooltip :content="$tc('Ticket')" effect="dark" open-delay="500">
<Tickets />
</el-tooltip>
</li>
<li v-perms="'settings.view_setting'" class="header-item header-icon">
<el-tooltip :content="$tc('SystemSetting')" effect="dark">
<el-tooltip :content="$tc('SystemSetting')" effect="dark" open-delay="500">
<SystemSetting />
</el-tooltip>
</li>

View File

@ -14,7 +14,7 @@
<slot name="title">
<span style="padding-left: 10px">
{{ iTitle }}
<el-tooltip v-if="helpTip" effect="dark" placement="top" popper-class="help-tips">
<el-tooltip v-if="helpTip" effect="dark" open-delay="500" placement="top" popper-class="help-tips">
<div slot="content" class="page-help-content" v-html="helpTip" />
<span>
<el-button class="help-msg-btn">

View File

@ -23,7 +23,7 @@
<i v-if="item.icon" :class="item.icon" class="fa pre-icon " />
{{ toSentenceCase(item.title) }}
<slot :tab="item.name" name="badge" />
<el-tooltip v-if="item.helpTip" effect="dark" placement="bottom" popper-class="help-tips">
<el-tooltip v-if="item.helpTip" effect="dark" open-delay="500" placement="bottom" popper-class="help-tips">
<div slot="content" class="page-help-content" v-html="item.helpTip" />
<span>
<el-button class="help-msg-btn">

View File

@ -12,6 +12,7 @@
<el-tooltip
:content="obj.label"
effect="dark"
open-delay="500"
placement="left"
style="margin: 4px;"
>

View File

@ -3,8 +3,9 @@
<span class="title">{{ config.title }}</span>
<el-tooltip
v-if="hasTip"
effect="dark"
:content="config.tip"
effect="dark"
open-delay="500"
placement="top"
>
<i class="fa fa-exclamation-circle icon" />

View File

@ -49,12 +49,12 @@ export default {
formatter: (row) => {
if (row.count) {
return <div>
<el-tooltip content='success'><span Class='text-success'>{row.count.ok}&nbsp;</span></el-tooltip>
<el-tooltip content='failed'><span Class='text-danger'>&nbsp;{row.count.failed}&nbsp;</span>
<el-tooltip open-delay='1000' content='success'><span Class='text-success'>{row.count.ok}&nbsp;</span></el-tooltip>
<el-tooltip open-delay='1000' content='failed'><span Class='text-danger'>&nbsp;{row.count.failed}&nbsp;</span>
</el-tooltip>
<el-tooltip content='exclude'><span Class='text-warning'>&nbsp;{row.count.excludes}&nbsp;</span>
<el-tooltip open-delay='1000' content='exclude'><span Class='text-warning'>&nbsp;{row.count.excludes}&nbsp;</span>
</el-tooltip>
<el-tooltip content='total'><span Class='text-primary'>&nbsp;{row.count.total}</span></el-tooltip>
<el-tooltip open-delay='1000' content='total'><span Class='text-primary'>&nbsp;{row.count.total}</span></el-tooltip>
</div>
}
return '-'

View File

@ -9,7 +9,7 @@
@change="handleCheckboxCheck(i, $event)"
>
{{ i.label }}
<el-tooltip :content="i.tip" placement="top">
<el-tooltip :content="i.tip" open-delay="500" placement="top">
<i class="fa fa-question-circle-o" />
</el-tooltip>
</el-checkbox>

View File

@ -8,7 +8,7 @@
<el-form-item :label="item.label" :prop="item.name" label-width="80px">
<template #label>
{{ item.label }}
<el-tooltip v-if="item.tip" :content="item.tip" placement="top">
<el-tooltip v-if="item.tip" :content="item.tip" open-delay="500" placement="top">
<i class="fa fa-question-circle-o" />
</el-tooltip>
</template>
@ -27,7 +27,7 @@
<el-form-item :label="field.label" :prop="field.name">
<template #label>
{{ field.label }}
<el-tooltip v-if="field.tip" :content="field.tip" placement="top">
<el-tooltip v-if="field.tip" :content="field.tip" open-delay="500" placement="top">
<i class="fa fa-question-circle-o" />
</el-tooltip>
</template>