Element el-input 输入框详解

待我称王封你为后i 2022-10-26 12:51 841阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 用途
 *  2. 输入框
 *   *  2.1 输入框基本功能
     *  2.2 显示占位文本
     *  2.3 禁用
     *  2.4 可清空的输入框
     *  2.5 显示密码框
     *  2.6 显示图标
     *  2.7 输入长度限制
 *  3. 文本域

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

效果如下：  
![在这里插入图片描述][20210202100727556.png_pic_center]

## 2.2 显示占位文本 ##

占位文本可以在输入框内容未输入时显示提示信息。

输入框功能1:显示占位文本
        <el-input v-model="input1" placeholder="请输入姓名"></el-input>
        <el-divider></el-divider>

![在这里插入图片描述][20210202100848504.png_pic_center]

## 2.3 禁用 ##

可以使用disabled属性禁用输入框。

输入框功能2:禁用
        <el-input v-model="input1" disabled></el-input>
        <el-divider></el-divider>

![在这里插入图片描述][202102021009255.png_pic_center]

## 2.4 可清空的输入框 ##

可以使用clearable属性提供可清空功能，当输入框中已有内容时即显示一个清空按钮，点击清空按钮后直接清空文本框。

输入框功能3:可清空
        <el-input v-model="input1" clearable></el-input>
        <el-divider></el-divider>

![在这里插入图片描述][20210202101059445.png_pic_center]

## 2.5 显示密码框 ##

可以通过show-password属性将输入框显示为密码框。

输入框功能4:显示为密码框
        <el-input v-model="input1" show-password></el-input>
        <el-divider></el-divider>

![在这里插入图片描述][20210202101147178.png_pic_center]

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

![在这里插入图片描述][20210202101257820.png_pic_center]

## 2.7 输入长度限制 ##

可以设置输入长度的上限。

输入框功能6:输入长度限制
        <el-input v-model="input1" maxlength="10" show-word-limit></el-input>
        <el-divider></el-divider>

![在这里插入图片描述][20210202101348126.png_pic_center]

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

效果：  
![在这里插入图片描述][20210202101525586.png_pic_center]

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[20210202100727556.png_pic_center]: /images/20221024/afdc94a77b464e3ba76b1e6ea512fa27.png
[20210202100848504.png_pic_center]: /images/20221024/f34f6336e9c1482ba43eb832292f9ce6.png
[202102021009255.png_pic_center]: /images/20221024/77ba8014a2874276a513834468f69a5d.png
[20210202101059445.png_pic_center]: /images/20221024/602ce07b2ba54c0b9c68c122b6940f1f.png
[20210202101147178.png_pic_center]: /images/20221024/65e5ab5ba0b445cba0da59593c24e931.png
[20210202101257820.png_pic_center]: /images/20221024/aa6c40e2b50d464fb198d81451141531.png
[20210202101348126.png_pic_center]: /images/20221024/5ca9910aa3e34c20851acba2cec44b52.png
[20210202101525586.png_pic_center]: /images/20221024/d37a493594b24d48807938db1a31ad61.png