Element UI学习2--input输入框

秒速五厘米 2023-01-03 01:24 518阅读 0赞

1、基础用法

如图：  
![在这里插入图片描述][20210106160030236.jpg_pic_center]  
2、禁用状态  
通过 disabled 属性指定是否禁用 input 组件

<el-input v-model="input" placeholder="请输入内容" :disabled="true">
    </el-input>

如图：  
![在这里插入图片描述][20210106160443312.jpg_pic_center]  
3、可清空  
使用clearable属性即可得到一个可清空的输入框

<el-input v-model="input" placeholder="请输入内容" clearable>
    </el-input>

如图：  
![在这里插入图片描述][20210106160844546.jpg_pic_center]  
4、密码框  
使用show-password属性即可得到一个可切换显示隐藏的密码框

<el-input placeholder="请输入密码" v-model="input" show-password>
     </el-input>

如图：  
![在这里插入图片描述][20210106161640791.jpg_pic_center]  
![在这里插入图片描述][20210106161648839.jpg_pic_center]  
5、带 icon 的输入框  
有两种方式

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]  
6、文本域  
用于输入多行文本信息，通过将 type 属性的值指定为 textarea。  
文本域高度可通过 rows 属性控制

<el-input t ype="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>

![在这里插入图片描述][20210106163827362.jpg_pic_center]  
7、可自适应文本高度的文本域  
autosize 属性

<el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea">
     </el-input>

如图：  
![在这里插入图片描述][20210106164122799.jpg_pic_center]  
autosize 可以设定为一个对象，指定最小行数和最大行数

<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 2}" placeholder="请输入内容" v-model="textarea">
    </el-input>

如图：  
![在这里插入图片描述][20210106164407748.jpg_pic_center]  
8、 复合型输入框  
可前置或后置元素，一般为标签或按钮  
可通过 slot 来指定在 input 中前置或者后置内容。

<el-input placeholder="请输入内容" v-model="input1">
                <template slot="prepend">Http://</template>
            </el-input>
            <br>
            <br>
            
            <el-input placeholder="请输入内容" v-model="input2">
               <template slot="append">.com</template>
            </el-input>
            <br>
            <br>
            
            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="餐厅名" value="1"></el-option>
                    <el-option label="订单号" value="2"></el-option>
                    <el-option label="用户电话" value="3"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>

如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]  
9、输入长度限制  
maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，  
在使用 maxlength 属性限制最大输入长度的同时，可通过设置 show-word-limit 属性来展示字数统计。

<el-input type="text" placeholder="请输入内容" v-model="text" maxlength="10" show-word-limit>
    </el-input>

如图：  
![在这里插入图片描述][20210106170149203.jpg_pic_center]

[20210106160030236.jpg_pic_center]: /images/20221119/2e97daaab182485a8dff7771374e2878.png
[20210106160443312.jpg_pic_center]: /images/20221119/81e43f393db345e693deb8337bb82c30.png
[20210106160844546.jpg_pic_center]: /images/20221119/3909f93842da4b678af3a5c11c40a369.png
[20210106161640791.jpg_pic_center]: /images/20221119/c751e4a01cd04b49a85016258c229e20.png
[20210106161648839.jpg_pic_center]: /images/20221119/b1d030b2d166494faf9f047aad0f2279.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/9b8de928c3694f63b45fc8848c80177f.png
[20210106163827362.jpg_pic_center]: /images/20221119/bda60f88b52f4b92b74f13b1c37e8416.png
[20210106164122799.jpg_pic_center]: /images/20221119/8b35019b4cba45f38547b21b22646526.png
[20210106164407748.jpg_pic_center]: /images/20221119/b5cdd3d0ba6f473189969b8ef52f834b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/bbcee9936a894d1d97e1bff1fe95fb5d.png
[20210106170149203.jpg_pic_center]: /images/20221119/2e2e939b8c084d6192bf645c76297e20.png