Element component (input input box)

Format:

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

input Attributes

type	type	type=""	defaulttext
value	bind value	value=""
maxlength	Maximum input length	maxlength="number"
show-word-limit	Display the number of remaining input characters		default false
minlength	Minimum input length	minlenght="number"
placeholder	input box placeholder text	placeholder=""
clearable	Can it be emptied		default false
disabled	disabled		default false
auto-complete	Autocomplete	auto-complete="on\|off"	default off
name
readonly	Is it read-only		default false
max	set maximum
min	set minimum
step	Set legal number intervals for input fields
resize	Controls whether it can be scaled by the user	resize="none\|both\|horizontal\|vertical
autofocus	get focus automatically		default false
form
label	The label text associated with the input box	label=""
tabindex	The tabindex of the input stream

Text field 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	type="textarea"	The type is a text field, the default is text
rows	The text field displays the number of lines	:rows="number"
autosize	Make the number of lines in the text field automatically adjust according to the text content		default false
		:autosize="{minRows:number,maxRows:number}"	Minimum and Maximum Number of Rows

input box with icon

prefix-icon	Add a display icon to the header of the input component	<el-input prefix-icon="desired icon"></el-input>
suffix-icon	Add a display icon at the end of the input component	<el-input suffix-icon="desired icon"></el-input>
slot	Add a display icon to the header of the input component	<el-input><i slot="suffix" class="所需图标"></i></el-input>
slot	Add a display icon at the end of the input component	<el-input><i slot="prefix" class="desired icon"></i></el-input>

Composite input box

Prepend or post an element (label|button) in the input box

Use slot to specify the pre- or post-distributed position in the 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 Slots

name	illustrate
prefix	The header content of the input box, only valid for type="text"
suffix	The content at the end of the input box, only valid for type="text"
prepend	The front content of the input box is only valid for type="text"
append	The content after the input box is only valid for type="text"

format

formatter and 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>

password box

type="password" show-password shows whether it is visible

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

Input Event

blur	Triggered when the Input loses focus	(event: Event)
focus	Triggered when the Input gets focus	(event: Event)
input	Triggered when the Input value changes	(value: string \| number)
clear	Fired when the clear button generated by the clearable attribute is clicked	—
change	Only fires when the input box loses focus or the user presses enter	(value: string \| number)

Input Methods

focus	使 input 获取焦点
blur	使 input 失去焦点
select	选中 input 中的文字