el-input コンテンツが入力ボックスのマウスホバー表示を超えています

I.はじめに

el-input 入力ボックスは日常の開発プロセスで頻繁に使用されるコンポーネントです。入力ボックスに要件を満たす内容を入力できます。このとき、入力内容の長さが入力ボックスの長さを超える場合、入力ボックス内のテキストが表示されない場合は、elementUI の el-tooltip コンポーネントを使用できます。

2. コード

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>

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

レンダリング:

入力ボックスの内容が長さを超えた後、マウスを入力ボックスの上に置くと、ツールチップが表示されます
。ツールチップのスタイルも elementUi に応じて変更できます。