Field 输入项

基本使用

<pk-field></pk-field>

代码示例

基础用法

创建一个输入项。

template

    <pk-field v-model="textValue" label="测试" placeholder="请输入内容" />

script

import { PkField } from "@pumpkin-ui/mobile"
import { ref } from "vue"

const textValue = ref('')

style

类型

输入项的类型。Field输入项的类型来自于HTML5的input标签的type属性。可选值为text、color、date、datetime-local、email、hidden、month、number、password、tel、time、url、week。默认为text。

template

    <pk-field v-model="numberValue" label="数字值" placeholder="请输入数字" />
    <pk-field v-model="textValue" label="颜色值" placeholder="请选择" type="color" />

script

import { PkField } from "@pumpkin-ui/mobile"
import { ref } from "vue"

const textValue = ref('')
const numberValue = ref('')

style

显示*号

可通过required属性设置显示*号。

提示

该属性只在样式上起到作用，不会对输入项进行校验。

template

    <pk-field v-model="textValue" label="显示*号" placeholder="请输入" required></pk-field>

script

import { PkField } from "@pumpkin-ui/mobile"
import { ref } from "vue"

const textValue = ref('')

style

只读禁用

可通过readonly属性设置输入项为只读。通过disabled属性设置输入项为禁用。

template

    <pk-field v-model="textValue" label="只读" placeholder="只读" readonly></pk-field>
    <pk-field v-model="textValue" label="禁用" placeholder="禁用" disabled></pk-field>

script

import { PkField } from "@pumpkin-ui/mobile"
import { ref } from "vue"

const textValue = ref('')

style

点击效果

可通过is-link属性设置输入项展示右箭头并开启点击效果。

template

    <pk-field v-model="textValue" label="点击效果" placeholder="点击效果" readonly is-link></pk-field>

script

import { PkField } from "@pumpkin-ui/mobile"
import { ref } from "vue"

const textValue = ref('')

style

垂直模式

可通过vertical属性设置输入项为垂直展示模式。

template

    <pk-field vertical v-model="numberValue" label="数字类型" placeholder="请输入数字" />
    <pk-field vertical v-model="textValue" label="颜色值" placeholder="请选择" type="color" />
    <pk-field vertical v-model="textValue" label="点击效果" placeholder="点击效果" readonly is-link></pk-field>

script

import { PkField } from "@pumpkin-ui/mobile"
import { ref } from "vue"

const textValue = ref('')
const numberValue = ref(123)

style

清空按钮的显示

可通过clearable属性设置输入项清空按钮的显示。通过clear-trigger控制清空按钮显示的时机，有always和auto两个可选值。

template

    <pk-field v-model="textValue" label="不显示清空按钮" placeholder="不显示清空按钮" :clearable="false"></pk-field>
    <pk-field v-model="textValue" label="一直显示清空按钮" placeholder="一直显示清空按钮" clear-trigger="always"></pk-field>
    <pk-field v-model="textValue" label="自动显示清空按钮" placeholder="自动显示清空按钮" clear-trigger="auto"></pk-field>

script

import { PkField } from "@pumpkin-ui/mobile"
import { ref } from "vue"

const textValue = ref('')

style

文本框的高度

在type为text时，可通过rows属性设置文本框显示的行数。通过autosize属性设置文本框根据内容自动展开。如果既设置rows，又设置autosize，则rows表示最小的行数的高度。

template

    <pk-field v-model="textValue" label="行数为3" placeholder="行数为3" :rows="3"></pk-field>
    <pk-field v-model="textValue" label="行数为3且autosize" placeholder="行数为3且autosize" autosize
        :rows="3"></pk-field>
    <pk-field v-model="textValue" label="仅autosize" placeholder="仅autosize" autosize></pk-field>

script

import { PkField } from "@pumpkin-ui/mobile"
import { ref } from "vue"

const textValue = ref('')

style

与表单联用

详见Form 表单

API

Props

属性名	说明	类型	默认值	可选值
v-model	输入项的值，双向绑定	string
type	输入项的类型	'text'｜'color'｜ 'date'｜ 'datetime-local'｜ 'email'｜ 'hidden'｜ 'month'｜ 'number'｜ 'password'｜ 'tel'｜ 'time'｜ 'url'｜ 'week'	text	'text'｜'color'｜ 'date'｜ 'datetime-local'｜ 'email'｜ 'hidden'｜ 'month'｜ 'number'｜ 'password'｜ 'tel'｜ 'time'｜ 'url'｜ 'week'
label	输入项的标签，label标签内的内容	string
required	显示必填的*号	boolean	false
border	显示下边框，若在form内最后一项默认不显示下边框（即使为true）	boolean	true
placeholder	输入项的占位符文本	string
name	输入项的name属性	string
rules	输入项的校验规则	FieldRule[]
readonly	只读	boolean	false
disabled	禁用	boolean	false
validate-auto-trim	验证之前，针对string类型的数据自动trim后校验	boolean	true
is-link	显示右箭头并开启点击效果	boolean	false
input-align	输入框在父级的对齐方式	'left'｜ 'center'｜ 'right'		'left'｜ 'center'｜ 'right'
label-align	标签文字在父级的对齐方式	'left'｜ 'center'｜ 'right'		'left'｜ 'center'｜ 'right'
vertical	垂直模式	boolean	false
clearable	可清空按钮	boolean	true
clear-trigger	清空按钮显示的时机	'always'｜'auto'	'always'	'always'｜'auto'
rows	显示的行数(仅text模式有效，若autosize为true，则该属性表示最小的显示行数)	number	1
autosize	根据文本内容自动展开(仅text模式有效)	number	1
max	原生的max属性	number
min	原生的min属性	number
maxlength	原生的maxlength属性	number
minlength	原生的minlength属性	number
autocomplete	原生的autocomplete属性	string

FieldRule

属性名	说明	类型	默认值
pattern	正则表达式	RegExp
trigger	触发时机	FieldRuleTrigger｜FieldRuleTrigger[]
message	验证不通过时的提示	string
required	是否必填	boolean
validator	自定义验证方法	(rule:FieldRule,value:any)=>Promise<boolean>｜boolean
formatter	验证前的formatter方法	(value:any)=>Promise<any>｜any

提示

自定义验证方法支持显示自定义错误信息，在验证不通过时，抛出异常即可。

FieldRuleTrigger

值	说明
onBlur	失焦
onChange	值变化
onSubmit	提交前

提示

Form组件onSumit前只会检验trigger为onSubmit的规则。Form组件的validate方法会强制检验所有规则。

Events

事件名	说明	回调参数
click	输入项组件被点击时触发(disabled不为true)	()=>void
onFocus	输入框聚焦时触发	(e:FocusEvent)=>void
onBlur	输入框失焦时触发	(e:FocusEvent)=>void
onClear	点击清空时触发	()=>void
onChange	输入框用户输入值变化时触发	()=>void

Slots

插槽名	说明	作用域
label	标签区域插槽
input	输入框区域插槽
button	输入项右侧按钮区域插槽
right-icon	输入项右侧图标区域插槽（使用此插槽将默认不显示清除按钮）	showClear:boolean,当前是否应当显示清除图标
tip	输入项下方的提示文本区域插槽	tip:string,当前验证不通过时的文本，通过时为空

Exposes

名称	说明	类型说明
focus	聚焦输入框	()=>void
blur	使输入框失去焦点	()=>void

样式变量

名称	默认值	说明
--pk-field-margin	var(--pk-margin-m)
--pk-field-padding	var(--pk-padding-m)
--pk-filed-font-size	var(--pk-font-size-m)
--pk-filed-text-color-secondary	var(--pk-text-color-secondary)
--pk-filed-text-color	var(--pk-text-color)
--pk-field-tip-text-color	var(--pk-error-color)