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，所以我們首先設定下統(tǒng)一樣式，便于演示。
.el-input {
width: 200px;
}
2.1 輸入框基本功能
輸入框可以與js變量雙向綁定，代碼為：
輸入框基本功能：雙向綁定
<el-input v-model="input1"></el-input> 輸入內容為：{{input1}}
<el-divider></el-divider>
效果如下：
2.2 顯示占位文本
占位文本可以在輸入框內容未輸入時顯示提示信息。
輸入框功能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屬性提供可清空功能，當輸入框中已有內容時即顯示一個清空按鈕，點擊清空按鈕后直接清空文本框。
輸入框功能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屬性為輸入框設置顯示在前方/后方的圖標。
輸入框功能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 輸入長度限制
可以設置輸入長度的上限。
輸入框功能6:輸入長度限制
<el-input v-model="input1" maxlength="10" show-word-limit></el-input>
<el-divider></el-divider>
3. 文本域
可以使用type="textarea"將輸入框轉換為文本域，注意文本域編譯后對應HTML類型為<textarea>，對應樣式為el-textarea，所以我們CSS部分設置為：
.el-textarea {
width: 400px;
}
HTML代碼：
文本域基本功能：顯示多行文本
<el-input type="textarea" :rows="2" placeholder="請輸入內容" v-model="input1"></el-input>
<el-divider></el-divider>
效果：
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue之父組件向子組件傳值并改變子組件的樣式,需要的朋友可以參考下2022-12-12
本文主要介紹了vue/react單頁應用后退不刷新方案，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
數據代理是什么？通過一個對象代理，對另一個對象中屬性的操作，簡單就是說：可以通過?對象b?對?對象a?中的屬性進行操作，這里我學到的數據代理是用Object.defineProperty這個方法進行操作2022-11-11
這篇文章給大家介紹了element表格數據模糊的實現(xiàn)代碼,文中有詳細的效果展示和實現(xiàn)代碼供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-01-01
vue項目頁面嵌入代碼塊vue-prism-editor的實現(xiàn)
這篇文章主要介紹了vue項目頁面嵌入代碼塊vue-prism-editor的實現(xiàn),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了Vue動態(tài)組件與異步組件,結合實例形式分析了動態(tài)組件與異步組件相關概念、功能及使用技巧,需要的朋友可以參考下2019-02-02
這篇文章主要給大家介紹了關于手動實現(xiàn)vue2.0的雙向數據綁定原理的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-02-02
這篇文章主要為大家介紹了Vue transx組件切換動畫庫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vant Uploader實現(xiàn)上傳一張或多張圖片組件
這篇文章主要為大家詳細介紹了Vant Uploader實現(xiàn)上傳一張或多張圖片組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue實現(xiàn)當訪問的路由不存在時跳轉到404頁面的方法詳解
在 Vue3 中,可以使用 Vue Router 實現(xiàn)跳轉到 404 頁面,即當用戶訪問一個不存在路由時,系統(tǒng)會默認跳轉到 404 頁面,本文給大家介紹了一個簡單的實現(xiàn)方法,需要的朋友可以參考下2023-12-12