基础用法
<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
<template>
<el-input
v-model="input"
style="width: 240px"
placeholder="Please input"
:formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
:parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>
密码框
使用 show-password 属性即可得到一个可切换显示隐藏的密码框
<template>
<el-input
v-model="input"
style="width: 240px"
type="password"
placeholder="Please input password"
show-password
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>
带图标的输入框
要在输入框中添加图标，你可以简单地使用 prefix-icon 和 suffix-icon 属性。 另外， prefix 和 suffix 命名的插槽也能正常工作。
<template>
<div class="flex gap-4 mb-4">
<span>Using attributes</span>
<el-input
v-model="input1"
style="width: 240px"
placeholder="Pick a date"
:suffix-icon="Calendar"
/>
<el-input
v-model="input2"
style="width: 240px"
placeholder="Type something"
:prefix-icon="Search"
/>
</div>
<div class="flex gap-4">
<span>Using slots</span>
<el-input v-model="input3" style="width: 240px" placeholder="Pick a date">
<template #suffix>
<el-icon class="el-input__icon"><calendar /></el-icon>
</template>
</el-input>
<el-input
v-model="input4"
style="width: 240px"
placeholder="Type something"
>
<template #prefix>
<el-icon class="el-input__icon"><search /></el-icon>
</template>
</el-input>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Calendar, Search } from '@element-plus/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref('')
</script>
文本域
- 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。
- 文本域高度可通过 rows 属性控制
<template>
<el-input
v-model="textarea"
style="width: 240px"
:rows="2"
type="textarea"
placeholder="Please input"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const textarea = ref('')
</script>
自适应文本域
- 设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。
- 可以给 autosize 提供一个包含有最大和最小高度的对象，让输入框自动调整。
<template>
<el-input
v-model="textarea1"
style="width: 240px"
autosize
type="textarea"
placeholder="Please input"
/>
<div style="margin: 20px 0" />
<el-input
v-model="textarea2"
style="width: 240px"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="Please input"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const textarea1 = ref('')
const textarea2 = ref('')
</script>
复合型输入框
- 可以在输入框中前置或后置一个元素，通常是标签或按钮。
- 可通过 slot 来指定在 Input 中分发的前置或者后置的内容。
<template>
<div>
<el-input
v-model="input1"
style="max-width: 600px"
placeholder="Please input"
>
<template #prepend>Http://</template>
</el-input>
</div>
<div class="mt-4">
<el-input
v-model="input2"
style="max-width: 600px"
placeholder="Please input"
>
<template #append>.com</template>
</el-input>
</div>
<div class="mt-4">
<el-input
v-model="input3"
style="max-width: 600px"
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"
style="max-width: 600px"
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>
尺寸
使用 size 属性改变输入框大小。 除了默认大小外，还有另外两个选项： large, small。
<template>
<div class="flex gap-4 mb-4 items-center">
<el-input
v-model="input1"
style="width: 240px"
size="large"
placeholder="Please Input"
/>
<el-input
v-model="input2"
style="width: 240px"
placeholder="Please Input"
/>
<el-input
v-model="input3"
style="width: 240px"
size="small"
placeholder="Please Input"
/>
</div>
<div class="flex gap-4 mb-4 items-center">
<el-input
v-model="input1"
style="width: 240px"
size="large"
placeholder="Please Input"
:suffix-icon="Search"
/>
<el-input
v-model="input2"
style="width: 240px"
placeholder="Please Input"
:suffix-icon="Search"
/>
<el-input
v-model="input3"
style="width: 240px"
size="small"
placeholder="Please Input"
:suffix-icon="Search"
/>
</div>
<div class="flex gap-4 items-center">
<el-input
v-model="input1"
style="width: 240px"
size="large"
placeholder="Please Input"
:prefix-icon="Search"
/>
<el-input
v-model="input2"
style="width: 240px"
placeholder="Please Input"
:prefix-icon="Search"
/>
<el-input
v-model="input3"
style="width: 240px"
size="small"
placeholder="Please Input"
:prefix-icon="Search"
/>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
</script>
输入长度限制
- 使用 maxlength 和 minlength 属性, 来控制输入内容的最大字数和最小字数。
- "字符数"使用JavaScript字符串长度来衡量。
- 为文本或文本输入类型设置 maxlength prop可以限制输入值的长度。
- 通过设置 show-word-limit 到 true 来显示剩余字数。
<template>
<el-input
v-model="text"
style="width: 240px"
maxlength="10"
placeholder="Please input"
show-word-limit
type="text"
/>
<div style="margin: 20px 0" />
<el-input
v-model="textarea"
maxlength="30"
style="width: 240px"
placeholder="Please input"
show-word-limit
type="textarea"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const text = ref('')
const textarea = ref('')
</script>
网友评论