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