fix : 修复tooltip细节

This commit is contained in:
2024-05-18 23:04:51 +08:00
parent b7ebd66729
commit c675b1ec48
2 changed files with 43 additions and 11 deletions

View File

@@ -0,0 +1,40 @@
<template>
<el-tooltip
effect="dark"
:content="props.content"
placement="bottom-start"
:disabled="isShow"
>
<div class="content" :style="{width: props.width+'px'}" @mouseover="isShowTooltip">
<span ref="contentRef">
<slot name="content">{{ props.content }}</slot>
</span>
</div>
</el-tooltip>
</template>
<script setup>
const props = defineProps({
content: {
type: String,
default: ''
}, width: {
type: String,
default: ''
}
})
const contentRef = ref()
const isShow = ref(false)
const isShowTooltip = () => {
isShow.value = props.width > contentRef.value.offsetWidth;
}
</script>
<style>
.content {
width: 45px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-top: 3px;
}
</style>

View File

@@ -6,9 +6,8 @@
<div style="display: flex;flex-wrap: wrap;">
<div v-for="(user,index) in userInfo" :key="index" class="avatar_name">
<div class="circle-user">
<el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
<span class="item_name">{{ user.name }}</span>
</el-tooltip>
<Tooltip :content="user.name" placement="bottom-start" width="45">
</Tooltip>
</div>
<div v-if="user.icon"
class="el-timeline-item__node" :style="{
@@ -47,6 +46,7 @@ const props = defineProps({
})
const init = () => {
console.log('props.userInfo',props.userInfo)
for (let user of props.userInfo) {
initUser(user)
}
@@ -121,12 +121,4 @@ init()
right: 1px;
}
.item_name {
width: 45px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-top: 3px;
}
</style>