vue组件---input字数限定

Vue.component('input-len-control', {
    template: `
    

        
        {{curLen}}/{{maxLen}}
    
    `,
    data() {
        return {
            curLen: 0, // 当前input值的长度
            input: ''
        }
    },
    // 父子组件双向绑定
    model: {
        prop: 'inputValue',
        event: 'change'
    },
    props: {
        maxLen: {
            type: Number,
            default: 16
        },
        placeholder: String,
        inputValue: {
            type: String,
            default: ''
        }
    },
    watch: {
        // 初始化时携带默认值
        inputValue: {
            handler(val) {
                const {
                    returnStr,
                    len
                } = getTagLen(val, this.maxLen)
                this.curLen = len
                this.input = returnStr
            },
            immediate: true
        }
    },
    mounted() {
    },
    methods: {
        inputControl(val) {
            const {
                returnStr,
                len
            } = getTagLen(val)
            this.curLen = len
            this.input = returnStr
            this.$emit('change', returnStr)
        }
    }
})
function getTagLen(str, maxLen) {
    let reg = /^[\u4e00-\u9fa5]{0,}$/;
    let len = 0;
    let returnStr = "";
    if (str === "") {
        return {
            returnStr,
            len
        }
    }
    str = str.split('');
    for (let i = 0; i < str.length; i++) {
        if (reg.test(str[i])) {
            if (len >= maxLen -1) break;
            len += 2;
        } else {
            len++;
        }
        returnStr += str[i];
        if (len >= maxLen) break;
    }
    return {
        returnStr,
        len
    }
}

基本样式

.input-control-wrapper {
    position: relative;
    height: 32px;
}
.input-control-wrapper input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    border: 1px solid #ccc;
    line-height: 32px;
    padding-left: 6px;
    padding-right: 35px;
    color: #333;
}
.input-control-wrapper .control {
    position: absolute;
    width: 35px;
    line-height: 32px;
    font-size: 12px;
    color: #999999;
    right: 0;
    top: 0;
    text-align: center;
}