动态计算组件内容长度

这种写法的好处在于：对于不固定长度的内容可以保证边框与内容的宽度不会出现较大空隙，通过length计算出来的宽度有空隙问题

html

 <div class="box" :class="{'disabled':isDisabled }">
        <el-input placeholder="" v-model="value" :clearable="false" :style="{width:inputWidth,padding: '0 2px;'}"
                  @input="textChange" :disabled="isDisabled"></el-input>
        <i class="el-icon-error icon" @click="close"></i>
    </div>

js

    computed: {
        inputWidth() {
            if(this.value!==undefined && this.value!==null && this.value!==''){
                const font='12px Arial'
                const canvas=document.createElement('canvas')
                const context=canvas.getContext('2d')
                context.font=font
                const {width}=context.measureText(this.value)
                return (width+15)+'px'
            }
        }
    },