Element组件（input输入框）

        

---

格式：

---

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

         input Attributes

type	类型	type=""	默认text
value	绑定值	value=""
maxlength	最大输入长度	maxlength="number"
show-word-limit	显示剩余输入字数		默认false
minlength	最小输入长度	minlenght="number"
placeholder	输入框占位文本	placeholder=""
clearable	是否可清空		默认false
disabled	禁用		默认false
auto-complete	自动补全	auto-complete="on|off"	默认off
name
readonly	是否只读		默认false
max	设置最大值
min	设置最小值
step	设置输入字段的合法数字间隔
resize	控制是否能被用户缩放	resize="none|both|horizontal|vertical
autofocus	自动获取焦点		默认false
form
label	输入框关联的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"	类型为文本域，默认text
rows	文本域显示行数	:rows="number"
autosize	使文本域行数根据文本内容自动进行调整		默认false
		:autosize="{minRows:number,maxRows:number}"	最小行数和最大行数

     

---

  带icon的输入框

---

        

prefix-icon	在input组件首部增加显示图标	<el-input prefix-icon="所需图标"></el-input>
suffix-icon	在input组件尾部增加显示图标	<el-input suffix-icon="所需图标"></el-input>
slot	在input组件首部增加显示图标	<el-input><i slot="suffix" class="所需图标"></i></el-input>
	在input组件尾部增加显示图标	<el-input><i slot="prefix" 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 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显示是否可见

        

<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 中的文字