input框-动态宽度的实现方案

输入框input随输入的字符来改变宽度

• 方案一：监听输入框的输入事件，判断是否大于初始输入框宽度，如果大于则更新输入框宽度

      // 计算输入框的当前宽度，这里假设每个字符宽10像素，输入框内边距20像素
      let newWidth = event.target.value.length * 10 + 20
      // 如果输入框的当前宽度大于初始宽度，则更新输入框的宽度
      if (newWidth > width) {
        el.style.width = newWidth + 'px'
      }

实现较复杂，性能没那么好

• 方案二：通过input+span实现

外部div是根据span来确定宽度，input则设置宽度为100%，当用户输入时字符多时，会改变div大小，即input随即改变，即可实现动态input

            <div class="title-input">
                <span class="title-input-span">{{ titleValue }}</span>
                <input class="title-input-value" placeholder="输入标题" v-model="titleValue">
            </div>

        .title-input {
            position: relative;
            display: inline-block;
            font-size: 16px;

            &-span {
                display: inline-block;
                min-width: 80px;
                border-bottom: 1px solid rgba($color: #fff, $alpha: 0.5);
            }

            &-value {
                position: absolute;
                display: inline-block;
                left: 0px;
                top: -4px;
                width: 100%;
                font-size: 16px;
                height: 30px;
                outline: none;
                color: #fff;

                &::-webkit-input-placeholder {
                    color: #fff;
                }
            }

        }