fix : 修复tooltip细节
This commit is contained in:
40
src/components/Tooltip.vue
Normal file
40
src/components/Tooltip.vue
Normal 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>
|
||||||
@@ -6,9 +6,8 @@
|
|||||||
<div style="display: flex;flex-wrap: wrap;">
|
<div style="display: flex;flex-wrap: wrap;">
|
||||||
<div v-for="(user,index) in userInfo" :key="index" class="avatar_name">
|
<div v-for="(user,index) in userInfo" :key="index" class="avatar_name">
|
||||||
<div class="circle-user">
|
<div class="circle-user">
|
||||||
<el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
|
<Tooltip :content="user.name" placement="bottom-start" width="45">
|
||||||
<span class="item_name">{{ user.name }}</span>
|
</Tooltip>
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="user.icon"
|
<div v-if="user.icon"
|
||||||
class="el-timeline-item__node" :style="{
|
class="el-timeline-item__node" :style="{
|
||||||
@@ -47,6 +46,7 @@ const props = defineProps({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
|
console.log('props.userInfo',props.userInfo)
|
||||||
for (let user of props.userInfo) {
|
for (let user of props.userInfo) {
|
||||||
initUser(user)
|
initUser(user)
|
||||||
}
|
}
|
||||||
@@ -121,12 +121,4 @@ init()
|
|||||||
right: 1px;
|
right: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item_name {
|
|
||||||
width: 45px;
|
|
||||||
text-align: center;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
padding-top: 3px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user