Input 输入框

通过鼠标或键盘输入字符

WARNING

Input 为受控组件，它 总会显示 Vue 绑定值。

在正常情况下，input 的输入事件应该被正常响应。 它的处理程序应该更新组件的绑定值 (或使用 v-model)。 否则，输入框的值将不会改变。

不支持 v-model 修饰符。

基础用法

Input 输入框 - 图1

  1. <template>
  2.   <el-input v-model="input" placeholder="Please input" />
  3. </template>
  5. <script lang="ts" setup>
  6. import { ref } from 'vue'
  7. const input = ref('')
  8. </script>

禁用状态

通过 disabled 属性指定是否禁用 input 组件

Input 输入框 - 图2

  1. <template>
  2.   <el-input v-model="input" disabled placeholder="Please input" />
  3. </template>
  5. <script lang="ts" setup>
  6. import { ref } from 'vue'
  7. const input = ref('')
  8. </script>

一键清空

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

Input 输入框 - 图3

  1. <template>
  2.   <el-input v-model="input" placeholder="Please input" clearable />
  3. </template>
  5. <script lang="ts" setup>
  6. import { ref } from 'vue'
  7. const input = ref('')
  8. </script>

格式化

在 formatter的情况下显示值，我们通常同时使用 parser

Input 输入框 - 图4

  1. <template>
  2.   <el-input
  3.     v-model="input"
  4.     placeholder="Please input"
  5.     :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
  6.     :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
  7.   />
  8. </template>
  10. <script lang="ts" setup>
  11. import { ref } from 'vue'
  12. const input = ref('')
  13. </script>

密码框

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

Input 输入框 - 图5

  1. <template>
  2.   <el-input
  3.     v-model="input"
  4.     type="password"
  5.     placeholder="Please input password"
  6.     show-password
  7.   />
  8. </template>
  10. <script lang="ts" setup>
  11. import { ref } from 'vue'
  12. const input = ref('')
  13. </script>

带图标的输入框

带有图标标记输入类型

要在输入框中添加图标，你可以简单地使用 prefix-icon 和 suffix-icon 属性。 另外， prefix 和 suffix 命名的插槽也能正常工作。

Input 输入框 - 图6

  1. <template>
  2.   <div class="demo-input-suffix">
  3.     <el-row :gutter="20">
  4.       <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
  5.         >Using attributes</span
  6.       >
  7.       <el-input
  8.         v-model="input1"
  9.         class="w-50 m-2"
  10.         placeholder="Pick a date"
  11.         :suffix-icon="Calendar"
  12.       />
  13.       <el-input
  14.         v-model="input2"
  15.         class="w-50 m-2"
  16.         placeholder="Type something"
  17.         :prefix-icon="Search"
  18.       />
  19.     </el-row>
  20.   </div>
  21.   <div class="demo-input-suffix">
  22.     <el-row :gutter="20">
  23.       <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
  24.         >Using slots</span
  25.       >
  26.       <el-input v-model="input3" class="w-50 m-2" placeholder="Pick a date">
  27.         <template #suffix>
  28.           <el-icon class="el-input__icon"><calendar /></el-icon>
  29.         </template>
  30.       </el-input>
  31.       <el-input v-model="input4" class="w-50 m-2" placeholder="Type something">
  32.         <template #prefix>
  33.           <el-icon class="el-input__icon"><search /></el-icon>
  34.         </template>
  35.       </el-input>
  36.     </el-row>
  37.   </div>
  38. </template>
  40. <script setup lang="ts">
  41. import { ref } from 'vue'
  42. import { Calendar, Search } from '@element-plus/icons-vue'
  43. const input1 = ref('')
  44. const input2 = ref('')
  45. const input3 = ref('')
  46. const input4 = ref('')
  47. </script>

文本域

用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。

文本域高度可通过 rows 属性控制

Input 输入框 - 图7

  1. <template>
  2.   <el-input
  3.     v-model="textarea"
  4.     :rows="2"
  5.     type="textarea"
  6.     placeholder="Please input"
  7.   />
  8. </template>
  10. <script lang="ts" setup>
  11. import { ref } from 'vue'
  12. const textarea = ref('')
  13. </script>

自适应文本域

设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。 你可以给 autosize 提供一个包含有最大和最小高度的对象，让输入框自动调整。

Input 输入框 - 图8

  1. <template>
  2.   <el-input
  3.     v-model="textarea1"
  4.     autosize
  5.     type="textarea"
  6.     placeholder="Please input"
  7.   />
  8.   <div style="margin: 20px 0" />
  9.   <el-input
  10.     v-model="textarea2"
  11.     :autosize="{ minRows: 2, maxRows: 4 }"
  12.     type="textarea"
  13.     placeholder="Please input"
  14.   />
  15. </template>
  17. <script lang="ts" setup>
  18. import { ref } from 'vue'
  19. const textarea1 = ref('')
  20. const textarea2 = ref('')
  21. </script>

复合型输入框

可以在输入框中前置或后置一个元素，通常是标签或按钮。

可通过 slot 来指定在 Input 中分发的前置或者后置的内容。

Input 输入框 - 图9

  1. <template>
  2.   <div>
  3.     <el-input v-model="input1" placeholder="Please input">
  4.       <template #prepend>Http://</template>
  5.     </el-input>
  6.   </div>
  7.   <div class="mt-4">
  8.     <el-input v-model="input2" placeholder="Please input">
  9.       <template #append>.com</template>
  10.     </el-input>
  11.   </div>
  12.   <div class="mt-4">
  13.     <el-input
  14.       v-model="input3"
  15.       placeholder="Please input"
  16.       class="input-with-select"
  17.     >
  18.       <template #prepend>
  19.         <el-select v-model="select" placeholder="Select" style="width: 115px">
  20.           <el-option label="Restaurant" value="1" />
  21.           <el-option label="Order No." value="2" />
  22.           <el-option label="Tel" value="3" />
  23.         </el-select>
  24.       </template>
  25.       <template #append>
  26.         <el-button :icon="Search" />
  27.       </template>
  28.     </el-input>
  29.   </div>
  30.   <div class="mt-4">
  31.     <el-input
  32.       v-model="input3"
  33.       placeholder="Please input"
  34.       class="input-with-select"
  35.     >
  36.       <template #prepend>
  37.         <el-button :icon="Search" />
  38.       </template>
  39.       <template #append>
  40.         <el-select v-model="select" placeholder="Select" style="width: 115px">
  41.           <el-option label="Restaurant" value="1" />
  42.           <el-option label="Order No." value="2" />
  43.           <el-option label="Tel" value="3" />
  44.         </el-select>
  45.       </template>
  46.     </el-input>
  47.   </div>
  48. </template>
  50. <script setup lang="ts">
  51. import { ref } from 'vue'
  52. import { Search } from '@element-plus/icons-vue'
  53. const input1 = ref('')
  54. const input2 = ref('')
  55. const input3 = ref('')
  56. const select = ref('')
  57. </script>
  59. <style>
  60. .input-with-select .el-input-group__prepend {
  61.   background-color: var(--el-fill-color-blank);
  62. }
  63. </style>

尺寸

使用 size 属性改变输入框大小。 除了默认大小外，还有另外两个选项： large, small。

Input 输入框 - 图10

  1. <template>
  2.   <div class="demo-input-size">
  3.     <el-input
  4.       v-model="input1"
  5.       class="w-50 m-2"
  6.       size="large"
  7.       placeholder="Please Input"
  8.     />
  9.     <el-input v-model="input2" class="w-50 m-2" placeholder="Please Input" />
  10.     <el-input
  11.       v-model="input3"
  12.       class="w-50 m-2"
  13.       size="small"
  14.       placeholder="Please Input"
  15.     />
  16.   </div>
  17.   <div class="demo-input-size">
  18.     <el-input
  19.       v-model="input1"
  20.       class="w-50 m-2"
  21.       size="large"
  22.       placeholder="Please Input"
  23.       :suffix-icon="Search"
  24.     />
  25.     <el-input
  26.       v-model="input2"
  27.       class="w-50 m-2"
  28.       placeholder="Please Input"
  29.       :suffix-icon="Search"
  30.     />
  31.     <el-input
  32.       v-model="input3"
  33.       class="w-50 m-2"
  34.       size="small"
  35.       placeholder="Please Input"
  36.       :suffix-icon="Search"
  37.     />
  38.   </div>
  39.   <div class="demo-input-size">
  40.     <el-input
  41.       v-model="input1"
  42.       class="w-50 m-2"
  43.       size="large"
  44.       placeholder="Please Input"
  45.       :prefix-icon="Search"
  46.     />
  47.     <el-input
  48.       v-model="input2"
  49.       class="w-50 m-2"
  50.       placeholder="Please Input"
  51.       :prefix-icon="Search"
  52.     />
  53.     <el-input
  54.       v-model="input3"
  55.       class="w-50 m-2"
  56.       size="small"
  57.       placeholder="Please Input"
  58.       :prefix-icon="Search"
  59.     />
  60.   </div>
  61. </template>
  63. <script lang="ts" setup>
  64. import { ref } from 'vue'
  65. import { Search } from '@element-plus/icons-vue'
  66. const input1 = ref('')
  67. const input2 = ref('')
  68. const input3 = ref('')
  69. </script>

输入长度限制

使用 maxlength 和 minlength 属性, 来控制输入内容的最大字数和最小字数。 “字符数”使用JavaScript字符串长度来衡量。 为文本或文本输入类型设置 maxlength prop可以限制输入值的长度。 允许你通过设置 show-word-limit 到 true 来显示剩余字数。

Input 输入框 - 图11

  1. <template>
  2.   <el-input
  3.     v-model="text"
  4.     maxlength="10"
  5.     placeholder="Please input"
  6.     show-word-limit
  7.     type="text"
  8.   />
  9.   <div style="margin: 20px 0" />
  10.   <el-input
  11.     v-model="textarea"
  12.     maxlength="30"
  13.     placeholder="Please input"
  14.     show-word-limit
  15.     type="textarea"
  16.   />
  17. </template>
  19. <script lang="ts" setup>
  20. import { ref } from 'vue'
  21. const text = ref('')
  22. const textarea = ref('')
  23. </script>

Input 属性

属性说明类型可选值默认值
type类型stringtext，textarea 和其他 原生 input 的 type 值 Input 输入框 - 图12text
modelValue / v-model绑定值string / number——
maxlength最大输入长度string / number——
minlength原生属性，最小输入长度number——
show-word-limit是否显示输入字数统计，只在 type = “text” 或 type = “textarea” 时有效boolean—false
placeholder输入框占位文本string——
clearable是否可清空boolean—false
formatter指定输入值的格式。(只有当 type 是”text”时才能工作)function(value: string / number): string——
parser指定从格式化器输入中提取的值。(仅当 type 是”text”时才起作用)function(string): string——
show-password是否显示切换密码图标boolean—false
disabled是否禁用boolean—false
size输入框尺寸，只在 type 不为 ‘textarea’ 时有效stringlarge / default / small—
prefix-icon自定义前缀图标string | Component——
suffix-icon自定义后缀图标string | Component——
rows输入框行数，仅 type 为 ‘textarea’ 时有效number—2
autosizetextarea 高度是否自适应，仅 type 为 ‘textarea’ 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 }boolean / object—false
autocomplete原生 autocomplete 属性string—off
name等价于原生 input name 属性string——
readonly原生 readonly 属性，是否只读boolean—false
max原生 max 属性，设置最大值———
min原生属性，设置最小值———
step原生属性，设置输入字段的合法数字间隔———
resize控制是否能被用户缩放stringnone / both / horizontal / vertical—
autofocus原生属性，自动获取焦点boolean—false
form原生属性string——
label标签文本string——
tabindex输入框的 tabindexstring / number--
validate-event输入时是否触发表单的校验boolean-true
input-styleinput 元素或 textarea 元素的 styleobject-{}

Input 插槽

名称说明
prefix输入框头部内容，只对非 type=”textarea” 有效
suffix输入框尾部内容，只对非 type=”textarea” 有效
prepend输入框前置内容，只对非 type=”textarea” 有效
append输入框后置内容，只对非 type=”textarea” 有效

Input 事件

事件名说明参数
blur在 Input 失去焦点时触发(event: Event)
focus在 Input 获得焦点时触发(event: Event)
change仅当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发(value: string | number)
input在 Input 值改变时触发(value: string | number)
clear在点击由 clearable 属性生成的清空按钮时触发—

Input 方法

方法说明参数
focus使 input 获取焦点—
blur使 input 失去焦点—
select选中 input 中的文字—

源代码

组件 Input 输入框 - 图13 • 文档 Input 输入框 - 图14

贡献者

Input 输入框 - 图15 云游君

Input 输入框 - 图16 三咲智子

Input 输入框 - 图17 JeremyWuuuuu

Input 输入框 - 图18 Zhongxiang Wang

Input 输入框 - 图19 msidolphin

Input 输入框 - 图20 Aex

Input 输入框 - 图21 Alan Wang

Input 输入框 - 图22 zz

Input 输入框 - 图23 Xc

Input 输入框 - 图24 류한경

Input 输入框 - 图25 opengraphica

Input 输入框 - 图26 bqy_fe

Input 输入框 - 图27 Delyan Haralanov

Input 输入框 - 图28 Hefty

Input 输入框 - 图29 Satrong

Input 输入框 - 图30 C.Y.Kun

Input 输入框 - 图31 Ryan2128

Input 输入框 - 图32 0song

Input 输入框 - 图33 btea

Input 输入框 - 图34 Serendipity96

Input 输入框 - 图35 白雾三语

Input 输入框 - 图36 张大大

Input 输入框 - 图37 kouchao

Input 输入框 - 图38 Valar103769

Input 输入框 - 图39 kooriookami

Input 输入框 - 图40 Herrington Darkholme

Input 输入框 - 图41 Zapic

Input 输入框 - 图42 bchen1029

Input 输入框 - 图43 SongWuKong

Input 输入框 - 图44 wd

Input 输入框 - 图45 troy

Input 输入框 - 图46 Enoch Qin

Input 输入框 - 图47 on the field of hope

Input 输入框 - 图48 Vgbire

Input 输入框 - 图49 Hades-li

Input 输入框 - 图50 qiang

Input 输入框 - 图51 Jeffrey-Wang

Input 输入框 - 图52 Kim Yang

Input 输入框 - 图53 iamkun

Input 输入框 - 图54 weidehai