如何实现input的宽度自适应

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

问题

这几天在调用饿了么的select选择器组件时，发现它的select选择器无法根据内容自适应宽度，如图所示

可以看到，第一项option的内容是超出select的选择框的长度的，但是选中的时候，select的选择框宽度无法根据option的内容自动变宽，导致只能看到部分内容。这样的体验是很差的。

然后select选择器内部也是用input实现的。

所以问题就是input的宽度如何根据内容来自适应。

解决

这个问题，网上有很多讨论。

目前我的解决方案是

在选择option的内容的时候，拿到option的内容，然后根据option内容的长度，乘以一个值（可变的，非固定，根据option内容来确定），得到option内容的宽度，然后把这个宽度去动态设置select框的宽度。

可以在watch里监听el-select选择框的value的变化。

代码如下：

  <el-select v-model="value" placeholder="请选择" :style="{'min-width': selectWidth}">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

var Main = {
    data() {
      return {
        options: [{
          value: '我是答案cp3我是答案cp3我是答案cp3',
          label: '我是答案cp3我是答案cp3我是答案cp3'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        selectWidth: ''
      }
    },
    watch: {
      value (val) {
        this.selectWidth = val.length * 14 + 'px' // 14 是动态的，可变的
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

注意：我这里的 val.length * 14 里的14是要根据你option的内容变化的，如果是纯中文，值需要变大一点。 这里需要大家根据自己的内容来改。

大家如果还有别的方案，欢迎评论交流。