网站名称添加悬浮显示全部

This commit is contained in:
Jason 2022-09-15 18:55:45 +08:00
parent 79749e28ea
commit 7adcc9bd60
2 changed files with 32 additions and 5 deletions

View File

@ -1,16 +1,37 @@
<template>
<div>
<el-tooltip v-bind="props" :disabled="disabled" placement="top" :teleported="false">
<div ref="textRef" class="overflow-text truncate">{{ content }}</div>
<el-tooltip v-bind="props" :disabled="disabled">
<div
ref="textRef"
class="overflow-text truncate"
:style="{ textOverflow: overfloType }"
>
{{ content }}
</div>
</el-tooltip>
</div>
</template>
<script lang="ts" setup>
import { useEventListener } from '@vueuse/core'
import { useTooltipContentProps } from 'element-plus'
import { useTooltipContentProps, type Placement } from 'element-plus'
import type { PropType } from 'vue'
const props = defineProps(useTooltipContentProps)
const props = defineProps({
...useTooltipContentProps,
teleported: {
type: Boolean,
default: false
},
placement: {
type: String as PropType<Placement>,
default: 'top'
},
overfloType: {
type: String as PropType<'ellipsis' | 'unset' | 'clip'>,
default: 'ellipsis'
}
})
const textRef = shallowRef<HTMLElement>()
const disabled = ref(false)

View File

@ -8,7 +8,13 @@
:class="{ 'text-white': theme == ThemeEnum.DARK }"
:style="{ left: `${szie + 16}px` }"
>
{{ title || config.webName }}
<overflow-tooltip
:content="title || config.webName"
:teleported="true"
placement="bottom"
overflo-type="unset"
>
</overflow-tooltip>
</div>
</transition>
</div>