vue之Element-Ui輸入框顯示與隱藏方式
更新時間：2023年04月17日 15:37:03 作者：爬坑的小白
這篇文章主要介紹了vue之Element-Ui輸入框顯示與隱藏方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Element-Ui輸入框顯示與隱藏
使用element-ui比較簡單,添加show-password即可
效果展示：
1. 隱藏展示
2. 顯示
<el-input placeholder="請輸入賬號密碼" v-model="input" show-password></el-input>
Element el-input 輸入框詳解
1. 用途
輸入框是使用非常多的元素，用來輸入用戶名、密碼等等信息。Element提供了功能和樣式豐富的輸入框，本篇就來了解下。
2. 輸入框
輸入框為el-input，其編譯后生成的HTML元素為input，樣式class中包含el-input，所以我們首先設(shè)定下統(tǒng)一樣式，便于演示。
.el-input {
width: 200px;
}
2.1 輸入框基本功能
輸入框可以與js變量雙向綁定，代碼為：
輸入框基本功能：雙向綁定
<el-input v-model="input1"></el-input> 輸入內(nèi)容為：{{input1}}
<el-divider></el-divider>
效果如下：
2.2 顯示占位文本
占位文本可以在輸入框內(nèi)容未輸入時顯示提示信息。
輸入框功能1:顯示占位文本
<el-input v-model="input1" placeholder="請輸入姓名"></el-input>
<el-divider></el-divider>
2.3 禁用
可以使用disabled屬性禁用輸入框。
輸入框功能2:禁用
<el-input v-model="input1" disabled></el-input>
<el-divider></el-divider>
2.4 可清空的輸入框
可以使用clearable屬性提供可清空功能，當輸入框中已有內(nèi)容時即顯示一個清空按鈕，點擊清空按鈕后直接清空文本框。
輸入框功能3:可清空
<el-input v-model="input1" clearable></el-input>
<el-divider></el-divider>
2.5 顯示密碼框
可以通過show-password屬性將輸入框顯示為密碼框。
輸入框功能4:顯示為密碼框
<el-input v-model="input1" show-password></el-input>
<el-divider></el-divider>
2.6 顯示圖標
可以通過prefix-icon或suffix-icon屬性為輸入框設(shè)置顯示在前方/后方的圖標。
輸入框功能5:顯示圖標
<el-input v-model="input1" prefix-icon="el-icon-search"></el-input>
<el-input v-model="input1" suffix-icon="el-icon-search"></el-input>
<el-divider></el-divider>
2.7 輸入長度限制
可以設(shè)置輸入長度的上限。
輸入框功能6:輸入長度限制
<el-input v-model="input1" maxlength="10" show-word-limit></el-input>
<el-divider></el-divider>
3. 文本域
可以使用type="textarea"將輸入框轉(zhuǎn)換為文本域，注意文本域編譯后對應(yīng)HTML類型為<textarea>，對應(yīng)樣式為el-textarea，所以我們CSS部分設(shè)置為：
.el-textarea {
width: 400px;
}
HTML代碼：
文本域基本功能：顯示多行文本
<el-input type="textarea" :rows="2" placeholder="請輸入內(nèi)容" v-model="input1"></el-input>
<el-divider></el-divider>
效果：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue之定義全局工具類問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
本文主要介紹了Vue3中簡單實現(xiàn)動態(tài)添加路由，，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了vue生成token并保存到本地存儲中,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
最近項目要用到百度地圖api,好久沒用到地圖,就百度了一番,下面這篇文章主要給大家介紹了關(guān)于vue3中使用百度地圖的簡單步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue中組件的傳值方式詳解,Vue中最常見的組件之間的通信方式有12種，今天我們會詳細講解父傳子props方式和子傳父emit以及非父子組件傳值,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了手寫一個vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
解決vue axios跨域 Request Method: OPTIONS問題(預(yù)檢請求)
這篇文章主要介紹了解決vue axios跨域 Request Method: OPTIONS問題(預(yù)檢請求)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue3.0-monaco組件封裝存檔代碼解析,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了使用Vue自定義指令實現(xiàn)Select組件,如果哪位朋友對vue自定義指令不是多了解的話，此篇文章會對你有所幫助的，需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03