https://blog.csdn.net/CuiCui_web/article/details/107225702之前这边文章中的方式是利用js来进行控制的,然后有一个局限,不支持适应最大宽度;另外如果强行设置宽度比较大,会被左侧菜单遮挡,即使给z-index:9999,也没用。看下图展示,2种方式解决之前的不足。(后续可能会更新elementUI表格种气泡乱串问题解决方案)
公共部分数据定义:
data(){
return{
business: {
id: '',
name: '啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊',
number: '',
creatorName: '',
ownerName: '',
description: '',
target: '啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊',
result: '啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,'
},
}
},
方式一:将hover的目标和隐藏的对象当作同一个父容器的子元素
<div style="padding:20px;">
<el-row>设置行数,行数超出,出现省略号,鼠标移入显示气泡,移出隐藏气泡</el-row>
<el-row
style="margin-top: 15px;">
<el-col :span="8">
<el-form class="formBox"
label-width="110px">
<el-form-item label="方式一:">
<div v-if="business.target" class="fixedTowRow">
<div class="parent-div"
style="">
<div class="content-box" style="">{{ business.target }}</div>
<div class="tip-box">
<div class="tip-box-div">
{{ business.target }}
</div>
</div>
</div>
</div>
<div v-else>
<span>无</span>
</div>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
样式部分:
// 方式一:将hover的目标和隐藏的对象当作同一个父容器的子元素
.parent-div{
.content-box{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
line-height: normal;
position:relative;
top:6px;
}
.tip-box{
display: none;
position: absolute;
/*float: left;*/
top:30px;
left:0px;
padding: 10px;
/*width: 100%;*/
width: max-content;
max-width: 500px;
z-index:1111;
height: auto;
background: #f0f6fb ;
color: #0a92d9 ;
font-size: 16px ;
border: 1px solid #0a92d9 ;
line-height: 1.2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
.tip-box-div{
max-height: 500px;
overflow-y: auto;
}
&:after{
content: '\00a0';
width: 0;
height: 0;
display: block;
border-color: transparent;
border-style: solid;
border-width: 6px;
/*border-top-color: #0a92d9 !important;*/
border-bottom-color: #0a92d9 !important;
position: absolute;
z-index:-1;
top:-13px;
/*top:46px;*/
left:10%;
}
}
&:hover{
.tip-box{
display: block;
}
}
}
方式二:将hover的目标与隐藏对象当作相邻的兄弟元素
<el-form-item label="方式二:">
<div v-if="business.target" class="fixedTowRow">
<div class="hover-box" style="">{{ business.target }}</div>
<div class="hover-box-nex">
<div class="tip-box-div">
{{ business.target }}
</div>
</div>
</div>
<div v-else>
<span>无</span>
</div>
</el-form-item>
样式部分:
// 方式二: 将hover的目标与隐藏对象当作相邻的兄弟元素
// 隐藏对象
.hover-box-nex{
display: none;
position: absolute;
top:30px;
left:0;
padding: 10px;
/*width: 100%;*/
width: max-content;
max-width: 500px;
z-index:1111;
height: auto;
background: #f0f6fb ;
color: #0a92d9 ;
font-size: 16px ;
border: 1px solid #0a92d9 ;
line-height: 1.2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
.tip-box-div{
max-height: 500px;
overflow-y: auto;
}
&:after{
content: '\00a0';
width: 0;
height: 0;
display: block;
border-color: transparent;
border-style: solid;
border-width: 6px;
/*border-top-color: #0a92d9 !important;*/
border-bottom-color: #0a92d9 !important;
position: absolute;
z-index:-1;
top:-13px;
//top:46px;
left:10%;
}
}
//hover的目标
.hover-box{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
line-height: normal;
/*position:relative;*/
top:6px;
}
// //hover的目标 // 隐藏元素
.hover-box:hover + .hover-box-nex{
display: list-item;
list-style-type: none;
}
// // 隐藏元素
.hover-box-nex:hover{
display: list-item;
list-style-type: none;
}