快捷導(dǎo)航

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

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

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

前言

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

在這里插入圖片描述

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

思路1：

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

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

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

methods: {
    getValue(val) {
      this.spanText = val;
      const spanStyle = document.querySelector(".spanText");
      this.$nextTick(() => {    // 如果不用$nextTick的話頁(yè)面并不會(huì)更新，它是在下次dom更新后再渲染到頁(yè)面上
        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;
}

在這里插入圖片描述

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

思路2：

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

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

css部分:

.inputStyle {
  margin-top: 30px;
  text-align: start;    // 這里一樣要設(shè)置，否則不是對(duì)齊的居中狀態(tài)
  min-width: 160px;   //這里給一個(gè)最小寬度
}
.el-input {
   width: auto;  // 這里一定要設(shè)置為auto 否則由于input是默認(rèn)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)實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)el-input寬度跟隨內(nèi)容自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

el-form中的rules未生效的解決方法
本文主要介紹了el-form中的rules未生效的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
vue項(xiàng)目純前端實(shí)現(xiàn)的模板打印功能示例代碼
在Vue項(xiàng)目中,通過(guò)使用vue-print-nb插件,可以實(shí)現(xiàn)頁(yè)面的打印功能,這篇文章主要介紹了vue項(xiàng)目純前端實(shí)現(xiàn)的模板打印功能的相關(guān)資料,需要的朋友可以參考下
2024-10-10
解決ele ui 表格表頭太長(zhǎng)問(wèn)題的實(shí)現(xiàn)
這篇文章主要介紹了解決ele ui 表格表頭太長(zhǎng)問(wèn)題的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
基于better-scroll 實(shí)現(xiàn)歌詞聯(lián)動(dòng)功能的代碼
BetterScroll 是一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場(chǎng)景需求的插件，BetterScroll 是使用純 JavaScript 實(shí)現(xiàn)的，這意味著它是無(wú)依賴的。本文基于better-scroll 實(shí)現(xiàn)歌詞聯(lián)動(dòng)功能，感興趣的朋友跟隨小編一起看看吧
2020-05-05
vue中rem的配置的方法示例
這篇文章主要介紹了vue中rem的配置的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Vue3封裝全局函數(shù)式組件方法總結(jié)
函數(shù)式組件就是沒(méi)有管理任何狀態(tài),也沒(méi)有監(jiān)聽(tīng)任何傳遞給它的狀態(tài),也沒(méi)有生命周期方法,它只是一個(gè)接受一些 prop 的函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3封裝全局函數(shù)式組件方法的相關(guān)資料,需要的朋友可以參考下
2023-06-06
vue使用vue-cropper實(shí)現(xiàn)圖片裁剪之單圖裁剪的步驟
本文介紹在若依系統(tǒng)中使用vue-cropper實(shí)現(xiàn)固定尺寸圖片裁剪上傳的步驟,包括安裝、引入、封裝子組件、父級(jí)調(diào)用及參數(shù)接收,ruoyi.css已集成相關(guān)樣式,感興趣的朋友跟隨小編一起看看吧
2025-08-08
vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)實(shí)例代碼（防抖函數(shù)的應(yīng)用場(chǎng)景）
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)的相關(guān)資料，主要是防抖函數(shù)的應(yīng)用場(chǎng)景，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Vue路由跳轉(zhuǎn)傳參或打開(kāi)新頁(yè)面跳轉(zhuǎn)的方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue路由跳轉(zhuǎn)傳參或打開(kāi)新頁(yè)面跳轉(zhuǎn)的相關(guān)資料,在使用Vue.js開(kāi)發(fā)單頁(yè)面應(yīng)用時(shí)常常會(huì)遇到路由跳轉(zhuǎn)傳參的需求,需要的朋友可以參考下
2023-07-07
vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽的方法
這篇文章主要介紹了vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽,實(shí)現(xiàn)思路非常簡(jiǎn)單內(nèi)容包括mata標(biāo)簽的特點(diǎn)和mata標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性，本文通過(guò)實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下
2022-11-11