vue实现文字过长鼠标移上去显示对应文字,移走隐藏
vue项目里实现列表里因文字过长,加上鼠标移上去显示对应文字效果
示例图片
html
<div class="name-lists">
<div class="title">测试测试测试测试</div>
<div class="hidden">
<div class="lists">
<div v-for="(item, i) in childCompany" :key="i">
<div class="name-item" v-if="item.length < 14">
{{ item }}
</div>
<div v-else class="hint" :data-hint="item">
<div class="name-item">{{ item }}</div>
</div>
</div>
</div>
</div>
</div>
注意::data-hint=“item” 必须有
js 数据定义
data() {
return {
childCompany: ['测试1','测试2','测试3','测试4','测试顶顶顶顶顶顶顶测试顶顶顶顶顶顶顶测试顶顶顶顶顶顶顶','测试1','测试1','测试顶顶顶顶顶顶顶测试顶顶顶顶顶顶顶测试顶顶顶顶顶顶顶']
};
},
style
.name-lists {
width: 100%;
height: 100%;
padding: 20px 0;
box-sizing: border-box;
.title {
font-size: 24px;
color: #f9cc1d;
margin-bottom: 10px;
padding-left: 20px;
}
.hidden {
width: 100%;
overflow: hidden;
.lists {
height: 490px;
margin-left: 20px;
margin-right: -10px;
overflow-y: auto;
.name-item {
position: relative;
width: 360px;
height: 40px;
line-height: 40px;
background: #0d183b;
margin-top: 11px;
padding: 0 12px;
font-size: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.hint {
position: relative;
width: calc(100% - 150px);
// before 三角形 after 文字
&::before,
&::after {
position: absolute;
opacity: 0;
z-index: 100;
translate: 0.3s ease;
// -webkit-transition: 0.3s ease;
// -moz-transition: 0.3s ease;
pointer-events: none; //禁止鼠标点击
}
&:hover::before,
&:hover::after {
opacity: 1;
}
&::before {
content: "";
background: transparent;
border: 8px solid transparent;
top: 100%;
left: 70%;
margin: -16px 0 0 0;
border-bottom-color: #50adfe;
}
&::after {
content: attr(data-hint);
background: #50adfe;
width: 340px;
border-radius: 4px;
color: #333;
padding: 8px 10px;
font-size: 22px;
top: 100%;
left: 0;
}
}