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

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

推薦閱讀: