vue input 自适宽度请教

Question

vue input 根据内容自适宽度请教
用可编辑 div代替input不行, div 中不能用 v-model
根据input.value 的内容来确定宽度好象也不好用
请教 正确的方法

Answer 1

用一个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>