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

需求:

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;
      }
    },
}
复制代码

 

posted @   Gaochunling  阅读(1242)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示