UI框架系列- input

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

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

html

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

<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start" :disabled="showTooltip">
     <el-input class="test" v-model="input" placeholder="请输入内容" @mouseover.native="inputOnMouseOver($event)"></el-input>
</el-tooltip>

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
}

效果截图：

结语

水纹天上碧 日气海边红