el-input内容超出输入框鼠标悬浮展示_elinput展示不全信息鼠标移入展示

一、前言

el-input输入框是平时开发过程中经常用到的组件，我们可以在输入框中输入满足要求的内容，此时如果输入的内容的长度超过了输入框的长度，输入框内的文字就会显示不全，此时可以使用elementUI中的el-tooltip组件

二、代码

html部分

          <el-tooltip
            class="item"
            effect="dark"
            :content="value"
            placement="top-start"
            :disabled="isShowTooltip"
          >
            <el-input
              v-model="value"
              @mouseover.native="inputOnMouseOver($event)"
            ></el-input>
          </el-tooltip>
1
2
3
4
5
6
7
8
9
10
11
12

js部分

data(){
  return {
  value:"",
  isShowTooltip:false
  }
},
methods:{
  inputOnMouseOver(e){
    const target = event.target;
      // 判断是否开启tooltip功能
      if (target.offsetWidth < target.scrollWidth) {
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果图：

输入框的内容超出长度后，鼠标悬浮在输入框上，就会出现tooltip提示
。tooltip的样式也可以按照elementUi修改。