el-input content exceeds the input box mouse hover display

I. Introduction

The el-input input box is a component often used in the daily development process. We can enter content that meets the requirements in the input box. At this time, if the length of the input content exceeds the length of the input box, the text in the input box will If the display is incomplete, you can use the el-tooltip component in elementUI.

2. Code

html part

          <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>

js part

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;
      }
  }
}

Rendering:

After the content of the input box exceeds the length, when the mouse is hovering over the input box, a tooltip will appear
. The style of the tooltip can also be modified according to elementUi.