vue input 根据内容自适宽度请教
用可编辑 div代替input不行, div 中不能用 v-model
根据input.value 的内容来确定宽度好象也不好用
请教 正确的方法
用一个absolute，top设置为负值定位到可视区域外的层来动态计算内容宽度在动态设置input的宽度，示例大概如下
<style>
.format{font-size:13px;font-family:'Microsoft YaHei';white-space:nowrap;}
</style>
<div id="app">
<div ref="dv" class="format" style="position:absolute;left:0;top:-1000px">{{msg}}</div>
<input type="text" v-model="msg" @input="setWidth" class="format" :style="`width:${width}px;min-width:100px`" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vue = new Vue({
el: '#app',
data: {
msg: '',
width: 100
},
methods: {
setWidth() {
this.$nextTick(() => { this.width = this.$refs.dv.offsetWidth + 10;/*加上输入框的padding及border，如果有*/ });
}
}
})
</script>
用css样式能控制吧，一般貌似很少根据内容来控制
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！