el-input实现宽度跟随输入内容自适应-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-input实现宽度跟随输入内容自适应。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

用了很多次el-input输入框，但是没有对这一个实现方式做深一步的思考，这次就把自己整理的方式记录下来；

input框根据输入自动调整宽度,javascript,前端,vue.js

如果默认直接使用，这里的input输入框的宽度是width：100%。继承它的父级的宽度。

思路1：

1.首先我们可以获取输入内容的宽度，然后给定一个span标签，使其的宽度撑开input的宽度。

<div class="inputStyle">
      <el-input
        @input="getValue"
        v-model="value1"
        :style="{ width: spanWidth }"
      ></el-input>
      <span class="spanText">{{ spanText }}</span>
    </div>

这里需要实时监听输入内容的宽度

methods: {
    getValue(val) {
      this.spanText = val;
      const spanStyle = document.querySelector(".spanText");
      this.$nextTick(() => {    // 如果不用$nextTick的话页面并不会更新，它是在下次dom更新后再渲染到页面上
        this.spanWidth =
          spanStyle.offsetWidth < 160
            ? "160px"
            : spanStyle.offsetWidth + 30 + "px";
      });
    },
  },

css部分：

.inputStyle {
  margin-top: 30px;
  width: 300px;
}
.spanText {
  font-size: 12px;
  position: absolute;
  left: 0;
  padding: 0 15px;
  white-space: nowrap;
  visibility: hidden;
}

input框根据输入自动调整宽度,javascript,前端,vue.js

// 这个方法有点不那么自然，如果输入英文和中文，会造成有一点间隙的存在，如果大家优化的话可以自行发挥，能力有限这个是最简单的版本…

思路2：

使用slot :Select 组件头部内容。然后设置样式即可，不用监听，展现效果上会比较好一点。

 <el-input v-model="value1" class="inputStyle">
        <template slot="prefix">
          {{ value1 }}
        </template>
      </el-input>

css部分:

.inputStyle {
  margin-top: 30px;
  text-align: start;    // 这里一样要设置，否则不是对齐的居中状态
  min-width: 160px;   //这里给一个最小宽度
}
.el-input {
   width: auto;  // 这里一定要设置为auto 否则由于input是默认width ：100%的
}
.inputStyle >>> .el-input__prefix {
  display: inline-block;
  position: relative;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  padding: 0 30px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding-left: 30px;
  left: 0;
  visibility: hidden;
}
.inputStyle >>> .el-input__inner {
  position: absolute;
}

效果如下：
input框根据输入自动调整宽度,javascript,前端,vue.js 文章来源地址https://www.toymoban.com/news/detail-537480.html