form-item

更新时间：2023-02-01 11:07:54

用户可以在文本框内输入或编辑文字。

属性

属性	类型	默认值	必填	说明
value	string	""	否	当前输入的值
name	string	""	否	在表单内提交时的标识符
label	string	""	否	输入框左侧文本
autofocus	boolean	false	否	获取焦点
placeholder	boolean	false	否	输入框为空时占位符
required	boolean	false	否	是否显示表单必填星号
type	'number' | 'text' | 'idcard' | 'textarea'	"text"	否	输入的类型
size	'normal' | 'mini'	"normal"	否	组件显示大小
disabled	boolean	false	否	是否禁用
use-slot	boolean	false	否	是否启用插槽
is-link	boolean	false	否	是否展示右侧箭头并开启点击反馈
show-word-limit	boolean	false	否	是否显示字数统计，需要设置maxlength属性
max-length	number	0	否	最大输入长度，设置为 -1 的时候不限制最大长度
error-msg	string	""	否	底部错误提示文案，为空时不展示
bindchange	(e: { detail: { value: string } }) => void		否	输入内容时触发
bindinput	(e: { detail: { value: string } }) => void		否	输入内容时触发
bindblur	(e: { detail: { value: string } }) => void		否	输入框失焦时触发

使用方式

在 json 文件中引入组件

{
    "usingComponents": {
      "k-form-item": "kma-ui/form-item/index"
    }
}

用法

基础用法

<k-form-item value="" label="示例文本" placeholder="请输入文本" require="{{false}}" bindChange="inputChange"/>

必填

<k-form-item value="" label="示例文本" placeholder="请输入文本" required="{{true}}" bindChange="inputChange" />

默认值

<k-form-item value="默认值填充" label="示例文本" placeholder="请输入文本" required="{{true}}" bindChange="inputChange"/>

数字类型

<k-form-item value="默认值填充" label="示例文本" placeholder="请输入文本" type="number" required="{{true}}" bindChange="inputChange"/>

错误提示

<k-form-item value="默认值填充" label="示例文本" placeholder="请输入文本" type="number" error-msg="报错提示" required="{{true}}" bindChange="inputChange"/>

字数统计

<k-form-item value="默认值填充" label="示例文本" placeholder="请输入文本" type="number" error-msg="报错提示" showWord-limit="{{ true }}"
       max-length="10" required="{{true}}" bindChange="inputChange"/>

字数统计(最大数量)

<k-form-item value="内容文本数量到了最大" label="示例文本" placeholder="请输入文本" type="number" error-msg="报错提示"
       showWord-limit="{{ true }}" max-length="10" required="{{true}}" bindChange="inputChange"/>

验证码

<k-form-item value="内容文本数量到了最大" label="示例文本" placeholder="请输入文本" type="number" useSlot="{{ true }}"
  max-length="6" required="{{true}}" bindChange="inputChange">
     <view class="verification" bindtap="sendVerification">发送验证码</view>
</k-form-item>

验证码(倒计时)

<k-form-item value="内容文本数量到了最大" label="示例文本" placeholder="请输入文本" type="number" useSlot="{{ true }}" max-length="6" required="{{true}}" bindChange="inputChange">
  <view class="countdown">23s</view>
</k-form-item>

size="mini"

<k-form-item value="正常" size="mini" showWordLimit="{{ true }}" max-length="10" label="输入个字" placeholder="输入个信息吧"
       require="{{true}}" bindChange="inputChange"/>

type="textarea"

<k-form-item value="正常" type="textarea" showWordLimit="{{ true }}" max-length="10" label="输入个字" placeholder="输入个信息吧"
       require="{{true}}" bindChange="inputChange"/>

右侧箭头

<k-form-item value="内容文本数量到了最大" label="示例文本" placeholder="请输入文本" type="number" is-link="{{ true }}" bindClickLink="clickLink">
  <view class="countdown">23s</view>
</k-form-item>