当表格中文本过多时,我们往往采用省略号的代替,鼠标滑过时用气泡展示全部内容。iview等UI框架自带有改组件,今天我们将用原生js实现改功能。
1、最终效果如下:
2、HTML
<div class="has-select-dropdown">
出发地:<input type="text" v-model="searchForm.start" class="city" placeholder="出发地"/>
目的地:<input type="text" v-model="searchForm.end" class="city" placeholder="目的地"/>
</div>
3、js
// 出发地、目的地、交通工具气泡
let htmlDom = `<div class="ivu-poptip-content">
<div class="ivu-poptip-arrow"></div>
<div class="ivu-poptip-inner">
<div class="ivu-poptip-body">
<div class="ivu-poptip-body-content">
<div class="ivu-poptip-body-content-inner"></div>
</div>
</div>
</div>
</div>`
var elem=document.createElement('div');
elem.setAttribute('class',"ivu-poptip-popper")
elem.setAttribute('id',"travlCity")
elem.setAttribute('x-placement',"top")
elem.style.display = "none";
elem.innerHTML = htmlDom;
document.body.appendChild(elem);
var cityDom = document.querySelectorAll(".has-select-dropdown")[0];
if(cityDom){
cityDom.addEventListener('mouseover', function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.placeholder == "出发地" || target.placeholder == "目的地" || target.placeholder == "交通工具"){
let val = ev.target.value;
if(val){
let popTip = document.getElementById('travlCity');
if(popTip){
popTip.querySelectorAll('.ivu-poptip-body-content-inner')[0].innerHTML = val;
popTip.style.display = "block";
popTip.style.top = ev.target.getBoundingClientRect().top + document.documentElement.scrollTop - 55 + "px";
popTip.style.left = ev.target.getBoundingClientRect().left + target.offsetWidth/2 - popTip.offsetWidth/2 + "px"
}
}
}
});
cityDom.addEventListener('mouseout', function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.placeholder == "出发地" || target.placeholder == "目的地" || target.placeholder == "交通工具"){
let popTip = document.getElementById('travlCity');
if(popTip){
popTip.style.display = "none";
}
}
});
}
4、css
</style lang="less">
body{
.ivu-poptip-popper {
min-width: 150px;
display: block;
visibility: visible;
font-size: 12px;
line-height: 22px;
position: absolute;
z-index: 1060;
}
.ivu-poptip-popper[x-placement=top] .ivu-poptip-arrow {
left: 50%;
margin-left: -7px;
bottom: 3px;
border-width: 7px 7px 0;
border-top-color: hsla(0,0%,85%,.5);
}
}
<style>