UI框架系列- input

一、实现input输入框内容超长tooltip提示

直接引入tooltip组件,会出现为输入时也显示提示框,因此需要判断输入的内容超出时才显示提示框。

html

注意:使用@mouseover.native,需加native注册原生事件,不然该事件不会生效。


     

js

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

目前在谷歌浏览器上测试没有问题,但是在ie浏览器没有生效,通过测试发现target.scrollWidth该值没有跟着改变,因此检测不到内容输入是否超出,可以通过判断输入字符长度来控制。

if (target.offsetWidth < target.scrollWidth || this.input.value.length > 10) {
  // 显示tooltip
  this.showTooltip = false
}else {
  this.showTooltip = true
}

效果截图:

UI框架系列- input_第1张图片

结语

水纹天上碧 日气海边红

你可能感兴趣的:(前端htmlcss3)