perf: 优化 tooltip 显示

This commit is contained in:
xiaozzzi 2024-01-14 15:56:34 +08:00
parent 286de7d453
commit a569fc9522
5 changed files with 235 additions and 40 deletions

View File

@ -117,3 +117,7 @@
}
}
}
.el-popper.is-small {
padding: 0 8px;
}

View File

@ -36,17 +36,19 @@
ref="ButtonRef"
v-click-outside="onClickOutside"></div>
<el-tooltip content="主题配置" popper-class="is-small" transition="none" effect="light" placement="top" :show-after="0" :hide-after="0">
<div class="iconbl bl-a-colorpalette-line" @click="themeStrore.show()"></div>
</el-tooltip>
<el-tooltip content="查看图标" effect="light" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
<el-tooltip content="所有图标" popper-class="is-small" transition="none" effect="light" placement="top" :show-after="0" :hide-after="0">
<div class="iconbl bl-a-radiochoose-line" @click="toRoute('/iconListIndex')"></div>
</el-tooltip>
<el-tooltip content="显示网页收藏" effect="light" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
<el-tooltip content="网页收藏" popper-class="is-small" transition="none" effect="light" placement="top" :show-after="0" :hide-after="0">
<div class="iconbl bl-folding-line" @click="isShowWebDrawer = !isShowWebDrawer"></div>
</el-tooltip>
<el-tooltip content="最佳窗口大小" effect="light" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
<el-tooltip content="最佳窗口大小" popper-class="is-small" transition="none" effect="light" placement="top" :show-after="0" :hide-after="0">
<div v-if="isElectron()" :class="['iconbl bl-computer-line', isWindows() ? '' : 'electron-mac-last']" @click="setBestSize"></div>
</el-tooltip>

View File

@ -3,21 +3,120 @@
<div class="tomato-bell" ref="TomatoBellRef"></div>
<div class="tools-container">
<!-- 文章的操作 -->
<el-tooltip
content="保存"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-a-texteditorsave-line" @click="emits('save')"></div>
</el-tooltip>
<el-tooltip
content="开启/关闭全屏预览"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-eye-line" @click="emits('previewFullScreen')"></div>
</el-tooltip>
<el-tooltip
content="开启/关闭全屏编辑"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-expansion-line" @click="emits('editorFullScreen')"></div>
</el-tooltip>
<!-- -->
<div class="divider"></div>
<el-tooltip
content="加粗"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-bold" @click="emits('bold')"></div>
</el-tooltip>
<el-tooltip
content="斜体"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-italic" @click="emits('italic')"></div>
</el-tooltip>
<el-tooltip
content="删除线"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-strikethrough" @click="emits('strike')"></div>
</el-tooltip>
<el-tooltip
content="上标"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-a-texteditorsuperscript-line" @click="emits('sup')"></div>
</el-tooltip>
<el-tooltip
content="下标"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-a-texteditorsubscript-line" @click="emits('sub')"></div>
</el-tooltip>
<el-tooltip
content="删除线"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-separator" @click="emits('separator')"></div>
</el-tooltip>
<!-- -->
<div class="divider"></div>
<el-tooltip
content="引用"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<el-dropdown>
<div class="iconbl bl-a-rightsmallline-line"></div>
<template #dropdown>
@ -32,22 +131,112 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- </div> -->
</el-tooltip>
<el-tooltip
content="行内代码块"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-single-quotes-r" @click="emits('code')"></div>
</el-tooltip>
<el-tooltip
content="多行代码块"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-double-quotes-r" @click="emits('pre')"></div>
</el-tooltip>
<el-tooltip
content="单选框"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-a-underbox-line" @click="emits('checkbox')"></div>
</el-tooltip>
<el-tooltip
content="无序列表"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-list-unordered" @click="emits('unordered')"></div>
</el-tooltip>
<el-tooltip
content="有序列表"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-list-ordered" @click="emits('ordered')"></div>
</el-tooltip>
<!-- 表格及其他 -->
<div class="divider"></div>
<el-tooltip
content="表格"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-table-" @click="emits('table')"></div>
</el-tooltip>
<el-tooltip
content="图片链接"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-image--line" @click="emits('image')"></div>
</el-tooltip>
<el-tooltip
content="链接"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-link-m" @click="emits('link')"></div>
</el-tooltip>
<!-- 其他工具 -->
<div class="divider"></div>
<el-tooltip
content="查看快捷键"
popper-class="is-small"
effect="light"
placement="top"
transition="none"
:hide-after="0"
:show-arrow="false"
:offset="10">
<div class="iconbl bl-jianpan-xianxing" @click="handleShowHotKeyDialog"></div>
</el-tooltip>
<!-- 番茄 -->
<el-popover placement="bottom" :width="220" trigger="click" popper-style="padding:0;">

View File

@ -1,7 +1,7 @@
<template>
<div class="aside-upload-root">
<el-tooltip effect="light" placement="right-start" :show-after="1000" :hide-after="0">
<template #content>提示:<br />从这里上传, 会上传至<br />🌌 默认文件夹</template>
<el-tooltip effect="light" placement="right" :show-after="1000" :hide-after="0">
<template #content>从这里上传, 会上传至<br />🌌 默认文件夹</template>
<el-upload
name="file"
:action="serverStore.serverUrl + uploadFileApiUrl"