Input 输入框

通过鼠标或键盘输入字符

基础文本框

基础文本框

Input 基础文本框

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="基础文本框，请输入" />
  <span>{{test}}</span>
</template>

禁用文本框

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

禁用文本框

Input 禁用文本框

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('some text')
</script>
<template>
  <Input v-model="test" disabled />
</template>

尺寸

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

不同尺寸文本框

不同尺寸文本框

<script setup lang="ts">
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <div class="size-holder">
    <Input v-model="test" placeholder="大的 Input" size="large">
    </Input>
    <Input v-model="test" placeholder="普通的 Input">
    </Input>
    <Input v-model="test" placeholder="小的 Input" size="small">
    </Input>
  </div>
</template>
<style scoped>
.size-holder {
  display: flex;
  align-items: center;
}
</style>

复合型输入框

可以在输入框前置或后置一个元素，通常是标签或按钮。可以使用 prepend 和 append 插槽。 要在输入框中添加前后元素，可以使用 prefix 和 suffix 插槽。

Https://

.com

复合型输入框

Input 复合型输入框

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
import Icon from '@/components/Icon/Icon.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="prepend append">
    <template #prepend>Https://</template>
    <template #append>.com</template>
  </Input>

  <Input v-model="test" placeholder="prefix suffix">
    <template #prefix>
      <Icon icon="fa-user" />
    </template>
    <template #suffix>
      <Icon icon="fa-user" />
    </template>
  </Input>
</template>

Textarea

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

Textarea

Textarea

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="可以是一个 Textarea" type="textarea">
  </Input>
</template>

密码文本框

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

密码文本框

Input 密码文本框

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="密码文本框，可以切换" showPassword/>
</template>

清空文本框

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

清空文本框

Input 清空文本框

<script setup lang="ts">
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" clearable placeholder="输入字符以后可以点击清空"/>
</template>

API

Input Attributes

参数	说明	类型	默认值
modelValue	绑定值	string	''
type	原生类型，支持 text 和 textarea 等	string	text
size	输入框尺寸	'large' | 'small'	-
placeholder	占位文本	string	-
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
clearable	是否显示一键清空按钮	boolean	false
showPassword	是否显示密码切换按钮	boolean	false
autocomplete	原生 autocomplete 属性	string	off
autofocus	原生 autofocus 属性	boolean	false
form	原生 form 属性	string	-

Input Events

事件名	说明	回调参数
update:modelValue	绑定值变化时触发	(value: string) => void
input	输入时触发	(value: string) => void
change	失焦且值变更后触发	(value: string) => void
focus	聚焦时触发	(event: FocusEvent) => void
blur	失焦时触发	(event: FocusEvent) => void
clear	点击清空按钮时触发	() => void

Input Exposes

方法名	说明	类型
ref	原生输入框节点（input 或 textarea）	HTMLInputElement | HTMLTextAreaElement