参考资料：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>