Element组件（input输入框）

格式：

<template>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
</template>
<script>
    export default{
        data(){
            return{
                input:''
            }
         }
    }
</script>

     input Attributes

type类型type=""默认textvalue绑定值value=""maxlength最大输入长度maxlength="number"show-word-limit显示剩余输入字数默认falseminlength最小输入长度minlenght="number"placeholder输入框占位文本placeholder=""clearable是否可清空默认falsedisabled禁用默认falseauto-complete自动补全auto-complete="on|off"默认offnamereadonly是否只读默认falsemax设置最大值min设置最小值step设置输入字段的合法数字间隔resize控制是否能被用户缩放resize="none|both|horizontal|verticalautofocus自动获取焦点默认falseformlabel输入框关联的label文字label=""tabindex输入流的tabindex

文本域textarea：

<template>
    <el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="textarea"></el-input>
    <el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea2"></el-input>
    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea3"></el-input>
</template>
<script>
export default {
  data() {
    return {
      textarea: ''，
      textarea2: '',
      textarea3: ''
    }
  }
}
</script>

     attribute：

type类型type="textarea"类型为文本域，默认textrows文本域显示行数:rows="number"autosize使文本域行数根据文本内容自动进行调整默认false:autosize="{minRows:number,maxRows:number}"最小行数和最大行数

带icon的输入框

    ![](https://img-blog.csdnimg.cn/79553c4c96c34cf0af492228fcf170b0.png)

prefix-icon在input组件首部增加显示图标<el-input prefix-icon="所需图标"></el-input>suffix-icon在input组件尾部增加显示图标<el-input suffix-icon="所需图标"></el-input>slot在input组件首部增加显示图标<el-input></el-input>在input组件尾部增加显示图标<el-input></el-input>

复合型输入框

                    在输入框中前置或后置一个元素（标签|按钮）

                    通过slot来指定在input中分发的前置或者后置的位置

            ![](https://img-blog.csdnimg.cn/96c17f36ea994a3081145fa312f0a053.png)

<template>
  <div>
    <el-input v-model="input1" placeholder="Please input">
      <template #prepend>Http://</template>
    </el-input>
  </div>
  <div class="mt-4">
    <el-input v-model="input2" placeholder="Please input">
      <template #append>.com</template>
    </el-input>
  </div>
  <div class="mt-4">
    <el-input
      v-model="input3"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #prepend>
        <el-select v-model="select" placeholder="Select" style="width: 115px">
          <el-option label="Restaurant" value="1" />
          <el-option label="Order No." value="2" />
          <el-option label="Tel" value="3" />
        </el-select>
      </template>
      <template #append>
        <el-button :icon="Search" />
      </template>
    </el-input>
  </div>
  <div class="mt-4">
    <el-input
      v-model="input3"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #prepend>
        <el-button :icon="Search" />
      </template>
      <template #append>
        <el-select v-model="select" placeholder="Select" style="width: 115px">
          <el-option label="Restaurant" value="1" />
          <el-option label="Order No." value="2" />
          <el-option label="Tel" value="3" />
        </el-select>
      </template>
    </el-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const select = ref('')
</script>

<style>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>

    input Slots

name说明prefix输入框头部内容，只对type="text"有效suffix输入框尾部内容，只对type="text"有效prepend输入框前置内容，只对type="text"有效append输入框后置内容，只对type="text"有效

格式化

            formatter和parser

<template>
  <el-input
    v-model="input"
    placeholder="Please input"
    :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
    :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
  />
</template>

密码框

            type="password"  show-password显示是否可见

    ![](https://img-blog.csdnimg.cn/7fdf078b83464c648dece23c72da51e6.png)

<template>
  <el-input
    v-model="input"
    type="password"
    placeholder="Please input password"
    show-password
  />
</template>

** Input Event**

blur

在 Input 失去焦点时触发

(event: Event)

focus

在 Input 获得焦点时触发

(event: Event)

input

在 Input 值改变时触发

(value: string | number)

clear

在点击由 clearable 属性生成的清空按钮时触发

—

change

仅在输入框失去焦点或用户按下回车时触发

(value: string | number)

 **  **

** Input Methods **

focus

使 input 获取焦点

blur

使 input 失去焦点

select

选中 input 中的文字