html输入框自动调整,input 输入框根据文字长度动态改变宽度

子组件

{{ myValue }}

export default {

props: {

value: {

type: String,

default: ""

},

maxlength: {

type: Number,

default: 140

}

},

data() {

return {

myValue: this.value

};

},

model: {

prop: "value", // 将value作为该组件被使用(被父组件调用)时,v-model能取到的值。可以自定义prop 名字

event: "valChange" //emit(触发)valChange的时候，参数的值就是父组件v-model收到的值。

},

watch: {

value(newVal) {

this.myValue = newVal;

},

myValue(newVal) {

this.$emit("valChange", newVal);

// 利用 span 的宽度来改变 input 的宽度

$("#input").css("width", $("#width_caculator").css("width"));

}

}

};

#width_caculator {

display: none;

padding: 0 15px;

}

#input {

width: 100px;

min-width: 100px;

padding: 0 5px;

border: none;

border-bottom: 1px solid #333;

outline: none;

}

父组件