对应 Arco 的 Input，默认使用灰底填充，聚焦时显示主色边框。 属性用法见 Element Plus 文档。
size 对应 Arco 三档尺寸，disabled 保留禁用态。
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>
<template>
<el-input v-model="value" placeholder="Enter text" style="width: 240px" />
<el-input size="small" placeholder="Small" style="width: 240px" />
<el-input size="large" placeholder="Large" style="width: 240px" />
<el-input disabled placeholder="Disabled" style="width: 240px" />
</template>el-form-item 的 error 展示 Arco 风格的浅红填充错误态。
<script setup lang="ts">
import { ref } from 'vue'
const email = ref('invalid-email')
</script>
<template>
<el-form style="width: 100%">
<el-form-item label="Email" error="Please enter a valid email address">
<el-input v-model="email" placeholder="Email" style="width: 240px" />
</el-form-item>
</el-form>
</template>前后缀、清除按钮、密码和附加标签沿用 Input 的填充式外观。
<script setup lang="ts">
import { ref } from 'vue'
import { User, Search } from '@element-plus/icons-vue'
const name = ref('Alex')
const password = ref('secret')
</script>
<template>
<el-input v-model="name" :prefix-icon="User" clearable placeholder="Username" style="width: 240px" />
<el-input :suffix-icon="Search" placeholder="Search" style="width: 240px" />
<el-input v-model="password" type="password" show-password style="width: 240px" />
<el-input placeholder="Domain" style="width: 320px">
<template #prepend>https://</template>
<template #append>.com</template>
</el-input>
</template>type="textarea" 支持多行输入，show-word-limit 展示字数统计。
<script setup lang="ts">
import { ref } from 'vue'
const text = ref('')
const title = ref('Hello')
</script>
<template>
<el-input v-model="text" type="textarea" :rows="3" placeholder="Write a note" style="width: 320px" />
<el-input v-model="title" maxlength="20" show-word-limit placeholder="Title" style="width: 240px" />
</template>