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

echo-_-

已于 2022-11-05 23:42:54 修改

阅读量8.7k

点赞数 6

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2022-11-05 21:24:41 首次发布

本文链接：https://blog.csdn.net/weixin_57182748/article/details/127709359

本文介绍两种方法调整Element UI中el-input输入框的宽度，并展示如何根据输入内容动态改变宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在这里插入图片描述

如果默认直接使用，这里的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;
}

在这里插入图片描述

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

思路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;
}

效果如下：
在这里插入图片描述