Element Plus 中Input输入框

通过鼠标或键盘输入字符

input为受控组件，他总会显示Vue绑定值，正常情况下，input的输入事件会正常被响应，他的处理程序应该更新组件的绑定值（或使用v-model）。否则，输入框的值将不会改变

不支持v-model修饰符

一、input基础用法

<template>
  <el-input v-model="input" style="width: 240px" placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

二、禁用状态

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

<template>
  <el-input
    v-model="input"
    style="width: 240px"
    disabled
    placeholder="Please input"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

三、一键清空

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

<template>
  <el-input
    v-model="input"
    style="width: 240px"
    placeholder="Please input"
    clearable
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

四、格式化

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

五、密码框

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

六、带图标的输入框

带有图标标记输入类型

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

七、文本域

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

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

八、自适应文本域

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

九、复合型输入框

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

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

十、尺寸

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

十一、输入长度限制

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