vue框架下实现字数过多隐藏,鼠标移入显示功能
其他
2019-01-30 09:08:03
阅读次数: 0
vue框架下实现字数过多隐藏,鼠标移入显示功能
- html:
<em class="c-300" @mouseenter="dItem && dItem.length>0 ? mouseen($event):''">{{dItem.substring(3)}}</em>
<em class="c-310 hidden" v-if="dItem && dItem.length > 0" @mouseleave="mousele($event)">{{dItem.substring(3)}}</em>
- js:
mouseen (e) {
let node = e.target
setTimeout(() => {
node.classList.add('hidden')
node.nextSibling.nextSibling.classList.remove('hidden')
}, 100)
},
mousele (e) {
setTimeout(() => {
e.target.classList.add('hidden')
e.target.previousSibling.previousSibling.classList.remove('hidden')
}, 100)
}
- css:
.c-300{
display: flex;
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.c-310{
display: flex;
display: -webkit-flex;
}
.hidden{
display:none;
}
转载自www.cnblogs.com/kasi/p/10336584.html