el-input宽度跟随输入内容自适应的实现方法
作者：echo-_-
这篇文章主要给大家介绍了关于el-input宽度跟随输入内容自适应的实现方法,我们再实际应用中可能需要input文本框能够根据输入字符的所占据的宽度自动调节尺寸,需要的朋友可以参考下
前言
用了很多次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;
}效果如下：
总结
到此这篇关于el-input宽度跟随输入内容自适应实现的文章就介绍到这了,更多相关el-input宽度跟随内容自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！