快捷導(dǎo)航

el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實現(xiàn)方法

更新時間：2023年08月11日 10:46:34 作者：echo-_-

這篇文章主要給大家介紹了關(guān)于el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實現(xiàn)方法,我們再實際應(yīng)用中可能需要input文本框能夠根據(jù)輸入字符的所占據(jù)的寬度自動調(diào)節(jié)尺寸,需要的朋友可以參考下

前言

用了很多次el-input輸入框，但是沒有對這一個實現(xiàn)方式做深一步的思考，這次就把自己整理的方式記錄下來；

在這里插入圖片描述

如果默認直接使用，這里的input輸入框的寬度是width：100%。繼承它的父級的寬度。

思路1：

1.首先我們可以獲取輸入內(nèi)容的寬度，然后給定一個span標簽，使其的寬度撐開input的寬度。

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

這里需要實時監(jiān)聽輸入內(nèi)容的寬度

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

在這里插入圖片描述

// 這個方法有點不那么自然，如果輸入英文和中文，會造成有一點間隙的存在，如果大家優(yōu)化的話可以自行發(fā)揮，能力有限這個是最簡單的版本…

思路2：

使用slot :Select 組件頭部內(nèi)容。然后設(shè)置樣式即可，不用監(jiān)聽，展現(xiàn)效果上會比較好一點。

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

css部分:

.inputStyle {
  margin-top: 30px;
  text-align: start;    // 這里一樣要設(shè)置，否則不是對齊的居中狀態(tài)
  min-width: 160px;   //這里給一個最小寬度
}
.el-input {
   width: auto;  // 這里一定要設(shè)置為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;
}

效果如下：

在這里插入圖片描述

總結(jié)

到此這篇關(guān)于el-input寬度跟隨輸入內(nèi)容自適應(yīng)實現(xiàn)的文章就介紹到這了,更多相關(guān)el-input寬度跟隨內(nèi)容自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: