<el-tooltip placement="top" effect="dark" :content="inputValue" >
<el-input
v-model="inputValue"
@mouseover="handleMouseover"
@mouseout="handleMouseout"
@focus="focus"
placeholder="Please input"
/>
</el-tooltip>
handleMouseover(e) {
if (this.isOverflow(e.target)) {
this.toolTipVisible = true;
}
},
handleMouseout() {
this.toolTipVisible = false;
},
focus() {
this.toolTipVisible = false;
},
isOverflow(target) {
const inputWidth = target.offsetWidth;
const spanEl = document.createElement("span");
spanEl.style.visibility = "hidden";
spanEl.style.whiteSpace = "nowrap";
spanEl.style.position = "absolute";
spanEl.style.left = "-9999px";
spanEl.textContent = this.inputValue;
document.body.appendChild(spanEl);
const contentWidth = spanEl.offsetWidth;
document.body.removeChild(spanEl);
return inputWidth < contentWidth;
},
:deep(.el-input__inner)[type="text"] {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}
