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. 輸入框
輸入框?yàn)?code>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)容未輸入時(shí)顯示提示信息。
輸入框功能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屬性提供可清空功能，當(dāng)輸入框中已有內(nèi)容時(shí)即顯示一個(gè)清空按鈕，點(diǎn)擊清空按鈕后直接清空文本框。
輸入框功能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 顯示圖標(biāo)
可以通過prefix-icon或suffix-icon屬性為輸入框設(shè)置顯示在前方/后方的圖標(biāo)。
輸入框功能5:顯示圖標(biāo)
<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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue之定義全局工具類問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue3中簡單實(shí)現(xiàn)動(dòng)態(tài)添加路由
本文主要介紹了Vue3中簡單實(shí)現(xiàn)動(dòng)態(tài)添加路由，，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了vue生成token并保存到本地存儲(chǔ)中,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
最近項(xiàng)目要用到百度地圖api,好久沒用到地圖,就百度了一番,下面這篇文章主要給大家介紹了關(guān)于vue3中使用百度地圖的簡單步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue中組件的傳值方式詳解,Vue中最常見的組件之間的通信方式有12種，今天我們會(huì)詳細(xì)講解父傳子props方式和子傳父emit以及非父子組件傳值,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了手寫一個(gè)vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
解決vue axios跨域 Request Method: OPTIONS問題(預(yù)檢請求)
這篇文章主要介紹了解決vue axios跨域 Request Method: OPTIONS問題(預(yù)檢請求)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue3.0-monaco組件封裝存檔代碼解析,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
使用Vue自定義指令實(shí)現(xiàn)Select組件
這篇文章主要介紹了使用Vue自定義指令實(shí)現(xiàn)Select組件,如果哪位朋友對vue自定義指令不是多了解的話，此篇文章會(huì)對你有所幫助的，需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03