vue element el-input 輸入框當內容長度超出時顯示el-tooltip提示

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

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

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

輸入內容長度超過輸入框

組件代碼如下（ts寫法）

<template>
    <el-tooltip effect="light" :content="value" :disabled="!isTip" ref="tip">
        <!-- v-bind="$attrs" v-on="$listeners"這樣寫只要組件沒有攔截配置和事件，父組件中可以直接配置el-input -->
        <el-input
            ref="input"
            v-model="inputValue"
            v-bind="$attrs"
            v-on="$listeners"
            @input="onInput"
        ></el-input>
    </el-tooltip>
</template>
<script lang="ts">
import { Component, Vue, Model, Emit, Watch } from "vue-property-decorator";
/**
 *
 * el-input組件增強，當文字內容過長超過輸入框寬度時，移動上去會浮動顯示輸入內容
 *
 * 用法和el-input一樣
 *
 */
@Component({
    name: "ZbTipInput"
})
export default class ZbTipInput extends Vue {
    // 輸入框值
    inputValue: String = "";
    // 是否顯示tip
    isTip: boolean = false;
    // 是否初始化
    isInit: boolean = true;
    // v-model綁定值
    @Model("change", { type: String }) value!: String;
    @Emit("change") setValue() {}
    // 拋出input事件
    @Emit("input") input() {}
    // 監聽v-model綁定值
    @Watch("value")
    updateValue(v: string) {
        const me = this as any;
        // 設值輸入框的值
        me.inputValue = v;
        // 視圖繪制完處理邏輯
        me.$nextTick(() => {
            const input = me.$refs.input.getInput(),
                // 判斷輸入框文字內容是否超過輸入框寬度
                isTip = input.offsetWidth < input.scrollWidth;
            // 標識是否顯示tip
            me.isTip = isTip;
            if (isTip) {
                if (!me.isInit) {
                    // 如果文字內容超長，並且不是初始化狀態
                    // 顯示tip提示
                    const tip = me.$refs.tip;
                    // 執行這個方法后tip提示才能實時顯示
                    tip.updatePopper();
                    // 顯示tip
                    tip.show();
                } else {
                    // 標識初始化完畢
                    me.isInit = false;
                }
            }
        });
    }
    // 輸入內容改變時
    onInput(v: string) {
        const me = this as any;
        // 更新v-model綁定值
        me.setValue(v);
        // 組件攔截了el-input的input事件，這里手動拋出同樣的事件，未驗證
        me.input(v);
    }
}
</script>

使用

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