參考資料：https://blog.csdn.net/qq_40190624/article/details/105730596

基於el-input與el-tooltip進行二次封裝，當el-input 輸入框當內容長度超出時顯示el-tooltip提示，支援所有el-input的配置與事件。效果如圖：

輸入內容長度未超過輸入框

輸入內容長度超過輸入框

元件程式碼如下（ts寫法）

 1 <template>
 2     <el-tooltip effect="light" :content="value" :disabled="!isTip" ref="tip">
 3         <!-- v-bind="$attrs" v-on="$listeners"這樣寫只要元件沒有攔截配置和事件，父元件中可以直接配置el-input -->
 4
 
         <el-input
 5             ref="input"
 6             v-model="inputValue"
 7             v-bind="$attrs"
 8             v-on="$listeners"
 9             @input="onInput"
10         ></el-input>
11     </el-tooltip>
12 </template>
13 <script lang="ts">
14 import { Component, Vue, Model, Emit, Watch } from "vue-property-decorator";
 
15 /**
16  *
17  * el-input元件增強，當文字內容過長超過輸入框寬度時，移動上去會浮動顯示輸入內容
18  *
19  * 用法和el-input一樣
20  *
21  */
22 @Component({
23     name: "ZbTipInput"
24 })
25 export default class ZbTipInput extends Vue {
26     // 輸入框值
27     inputValue: String = "";
28     // 是否顯示tip
29     isTip: boolean = false;
30     // 是否初始化
31
 
     isInit: boolean = true;
32     // v-model繫結值
33     @Model("change", { type: String }) value!: String;
34     @Emit("change") setValue() {}
35     // 丟擲input事件
36     @Emit("input") input() {}
37     // 監聽v-model繫結值
38     @Watch("value")
39     updateValue(v: string) {
40         const me = this as any;
41         // 設值輸入框的值
42         me.inputValue = v;
43         // 檢視繪製完處理邏輯
44         me.$nextTick(() => {
45             const input = me.$refs.input.getInput(),
46                 // 判斷輸入框文字內容是否超過輸入框寬度
47                 isTip = input.offsetWidth < input.scrollWidth;
48             // 標識是否顯示tip
49             me.isTip = isTip;
50             if (isTip) {
51                 if (!me.isInit) {
52                     // 如果文字內容超長，並且不是初始化狀態
53                     // 顯示tip提示
54                     const tip = me.$refs.tip;
55                     // 執行這個方法後tip提示才能實時顯示
56                     tip.updatePopper();
57                     // 顯示tip
58                     tip.show();
59                 } else {
60                     // 標識初始化完畢
61                     me.isInit = false;
62                 }
63             }
64         });
65     }
66     // 輸入內容改變時
67     onInput(v: string) {
68         const me = this as any;
69         // 更新v-model繫結值
70         me.setValue(v);
71         // 元件攔截了el-input的input事件，這裡手動丟擲同樣的事件，未驗證
72         me.input(v);
73     }
74 }
75 </script>

使用

1                 <zb-tip-input
2                     v-model="formData.enterpriseMailbox"
3                     placeholder="請輸入企業郵箱"
4                     clearable
5                     maxlength="40"
6                 ></zb-tip-input>