基于el-input与el-tooltip进行二次封装，当el-input 输入框当内容长度超出时显示el-tooltip提示，支持所有el-input的配置与事件。效果如图：

输入内容长度未超过输入框

输入内容长度超过输入框

组件代码如下(ts写法)

1

2

3

4

5 ref="input"

6 v-model="inputValue"

7 v-bind="$attrs"

8 v-on="$listeners"

9 @input="onInput"

10 >

11

12

13

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

使用

1

2 v-model="formData.enterpriseMailbox"

3 placeholder="请输入企业邮箱"

4 clearable

5 maxlength="40"

6 >

标签：me,el,vue,tip,tooltip,输入框,isTip,input

来源： https://www.cnblogs.com/mlzs/p/13515977.html