Element UI学习2--input输入框

1、基础用法

<template>
   <div>
       <el-input v-model="input" placeholder="请输入内容">el-input>
   div>
template>

<script>
export default {
     
    name:'input',
    data(){
     
        return{
     
           input:''
        }
    }
    
}
</script>

如图：

2、禁用状态
通过 disabled 属性指定是否禁用 input 组件

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

如图：

3、可清空
使用clearable属性即可得到一个可清空的输入框

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

如图：

4、密码框
使用show-password属性即可得到一个可切换显示隐藏的密码框

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

如图：


5、带 icon 的输入框
有两种方式

<div class="demo-input-suffix">
           属性方式：
           <br>
           <br>
           
           <el-input 
           placeholder="请选择日期" 
           suffix-icon="el-icon-date" 
           v-model="input1">
           el-input>
           <br>
           <br>
           
           <el-input 
           placeholder="请输入内容" 
           prefix-icon="el-icon-search" 
           v-model="input2">
           el-input>
       div>
       <br>
       <div class="demo-input-suffix">
           slot 方式：
           <br>
           <br>
           
           <el-input placeholder="请选择日期" v-model="input3">
               <i slot="suffix" class="el-input__icon el-icon-date">i>
           el-input>
           <br>
           <br>
           
           <el-input placeholder="请输入内容" v-model="input4">
              <i slot="prefix" class="el-input__icon el-icon-search">i>
           el-input>
        div>

如图：

6、文本域
用于输入多行文本信息，通过将 type 属性的值指定为 textarea。
文本域高度可通过 rows 属性控制

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

7、可自适应文本高度的文本域
autosize 属性

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

如图：

autosize 可以设定为一个对象，指定最小行数和最大行数

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

如图：

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

如图：

9、输入长度限制
maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，
在使用 maxlength 属性限制最大输入长度的同时，可通过设置 show-word-limit 属性来展示字数统计。

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

如图：