526互联

element input字数超长，鼠标划上顶部弹框显示全部内容

发布时间 2023-09-06 11:53:33作者: Gaochunling

需求：

input 备注输入框字数超长输入后，鼠标划上弹框显示所有内容

实现逻辑：

1、传入$event对象 ，获取offsetwidth 与scrollWidth,对比，如果大于则显示

template 定义：
<el-input placeholder="" maxlength="100" @mouseover.native="inputOnMouseOver($event)" v-model="submationInfo.memo"></el-input>

data(){
　　showTooltip: true
}
methods: {
　　inputOnMouseOver(event) {
　　　　const target = event.target;
　　　　if (target.offsetWidth < target.scrollWidth) {
　　　　　　this.showTooltip = false;
      } else {
        this.showTooltip = true;
      }
    },
}