Element组件（input输入框）

本文介绍: 通过 slot来指定在input中分发的前置或者后置的位置。在输入框中前置或后置一个元素（标签|按钮）formatter和parser。在点击由 cle ar a ble 属性生成的清空按钮时触发。仅在输入框失去焦点或用户按下回车时触发。在 Inpu t 失去焦点时触发。在 Inpu t 获得焦点时触发。在 Inpu t 值改变时触发。选中 input 中的文字。使 i nput 获取焦点。使 in put 失去焦点。

格式：

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

in put Attributes

type	类型	type=””	默认 text
value	绑定值	value=””
max length	最大输入长度	max length=”number“
show–word–limit	显示剩余输入字数		默认 false
min length	最小输入长度	min lenght=”number“
placeholder	输入框占位文本	placeholder=””
cle ar a ble	是否可清空		默认 false
disabled	禁用		默认 false
auto–com p let e	自动补全	auto–com plete=”on\|off“	默认 off
name
readonly	是否只读		默认 false
max	设置最大值
min	设置最小值
step	设置输入字段的合法数字间隔
resize	控制是否能被用户缩放	resize=”none\|bot h\|h o rizontal\|v e rt ical
auto f oc us	自动获取焦点		默认 false
form
label	输入框关联的label文字	label=””
tab index	输入流的tab index

文本域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”	类型为文本域，默认 text
rows	文本域显示行数	:rows=”number“
autosize	使文本域行数根据文本内容自动进行调整		默认false
		:auto size=”{minRo ws:number,maxRo ws:number}”	最小行数和最大行数

带icon的输入框

prefix–icon	在input组件首部增加显示图标	<el-input pr efi x–icon=”所需图标“></el-input>
suf fix–icon	在input组件尾部增加显示图标	<el-input suf fix–icon=”所需图标“></el-input>
slot	在input组件首部增加显示图标	<el-input><i slot=”su ffi x” class=”所需图标”></i></el-input>
slot	在input组件尾部增加显示图标	<el-input><i slot=”pr efi x” class=”所需图标”></i></el-input>

复合型输入框

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

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

<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 Slo ts

name	说明
pr efi x	输入框头部内容，只对type=”text“有效
su ffi x	输入框尾部内容，只对type=”text“有效
prepend	输入框前置内容，只对type=”text“有效
append	输入框后置内容，只对ty pe=”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>

密码框

ty pe=”password” show–password 显示是否可见

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

Input Event

blur	在 Input 失去焦点时触发	(event: Event)
foc us	在 Input 获得焦点时触发	(event: Event)
input	在 Input 值改变时触发	(value: string \| number)
clear	在点击由 clearable 属性生成的清空按钮时触发	—
change	仅在输入框失去焦点或用户按下回车时触发	(value: string \| number)