Input 输入框

通过鼠标或键盘输入字符

基础用法

vue

<template> <ap-input v-model="value" placeholder="请输入" /> </template> <script lang="ts" setup> import { ref } from 'vue' const value = ref('') </script>

显示代码

输入框禁用

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

vue

<template> <ap-input v-model="value" disabled placeholder="请输入" /> </template> <script lang="ts" setup> import { ref } from 'vue' const value = ref('') </script>

显示代码

显示搜索按钮并触发搜索事件

通过 search 属性指定是否进行搜索，通过Search事件可以获取搜索的值

vue

<template> <div style="margin-bottom: 10px"> 搜索的值为:<span style="color: red">{{ text }}</span> </div> <ap-input v-model="value" search @Search="search" /> </template> <script lang="ts" setup> import { ref } from 'vue' const value = ref('') const text = ref('') const search = value => { text.value = value } </script>

显示代码

显示清除按钮

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

vue

<template> <ap-input v-model="value" clearable placeholder="请输入"> </ap-input> </template> <script lang="ts" setup> import { ref } from 'vue' const value = ref('') </script>

显示代码

格式化输入

使用 formatter 属性指定一个格式化函数来对输入值进行格式化，同时配合 parser 属性指定一个解析函数来对已格式化的值进行解析。

vue

<template> <ap-input v-model="value" clearable placeholder="请输入" :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="value => value.replace(/\$\s?|(,*)/g, '')" > </ap-input> </template> <script lang="ts" setup> import { ref } from 'vue' const value = ref('') </script>

显示代码

复合型输入框

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

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

vue

<template> <ap-form> <ap-form-item> <ap-input v-model="inputVal1"> <template #prepend>Http://</template> </ap-input> </ap-form-item> <ap-form-item> <ap-input v-model="inputVal2"> <template #append>.com</template> </ap-input> </ap-form-item> <ap-form-item> <ap-input v-model="inputVal3"> <template #prepend> <ap-select v-model="selectVal1" style="margin: 0 -0.5rem"> <ap-option value="">请选择</ap-option> <ap-option value="baidu">baidu</ap-option> <ap-option value="google">google</ap-option> </ap-select> </template> <template #append> <ap-icon> <Search /></ap-icon> </template> </ap-input> </ap-form-item> <ap-form-item> <ap-input v-model="inputVal4"> <template #prepend> <ap-icon> <Search /></ap-icon> </template> <template #append> <ap-select v-model="selectVal2" style="margin: 0 -0.5rem"> <ap-option value="">请选择</ap-option> <ap-option value="baidu">baidu</ap-option> <ap-option value="google">google</ap-option> </ap-select> </template> </ap-input> </ap-form-item> </ap-form> </template> <script lang="ts" setup> import { ref } from 'vue' const inputVal1 = ref('') const inputVal2 = ref('') const inputVal3 = ref('') const inputVal4 = ref('') const selectVal1 = ref('') const selectVal2 = ref('') </script>

显示代码

最大输入长度

使用 maxWords 属性, 来控制输入内容的最大字数。

vue

<template> <ap-input v-model="value" placeholder="最多输入10个字符" :maxWords="10" /> </template> <script lang="ts" setup> import { ref } from 'vue' const value = ref('') </script>

显示代码

文本框

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

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

vue

<template> <ap-input v-model="value" type="textarea" placeholder="请输入" /> </template> <script lang="ts" setup> import { ref } from 'vue' const value = ref('') </script>

显示代码

Input Props

prop	说明	类型	默认值
type	原生 type	'text', 'textarea'	text
modelValue	绑定值	string,number	无
inputClass	input 的 class	string	''
search	是否搜索	boolean	false
clearable	是否显示清除按钮	boolean	false
disabled	禁用	boolean	false
maxWords	最长的字长数，一个英文等于 0.5 字长，一个中文等于 1 个字长	number	无
placeholder	输入提示文字	string	''
formatter	指定输入值的输入格式	(val: string | number) => string	无
parser	指定从格式化器输入中提取的值。	(val: string) => string	无
rows	输入框行数，仅 type 为 'textarea' 时有效	number	3
size	输入框的尺寸	'sm', 'md' ,'lg'	'md'
prefixIcon	自定义前缀图标	Component	无
suffixIcon	自定义后缀图标	Component	无

Input 插槽

input slots 如下，使用方法见上前后缀

名称	说明
prepend	输入框前置内容
append	输入框后置内容
prefix	输入框前部内容
suffix	输入框后部内容

Input 事件

名称	说明	参数
input	输入框前置内容	e. e 是 input 的原生 event
search	输入框后置内容	value. value 是 input 的值