vue之Element-Ui輸入框顯示與隱藏方式

Posted on by

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，所以我們首先設定下統一樣式，便於演示。

.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>

效果：

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：