Field 输入框

使用指南

在 index.json 中引入组件

  1. {
  2. "usingComponents":{
  3. "zan-field":"path/to/zanui-weapp/dist/field/index"
  4. }
  5. }

代码演示

基础用法

field 支持多种展示方式,在 data 中传入对应的设置即可。

  1. <zan-field
  2. title="{{ field.title }}"
  3. placeholder="{{ field.placeholder }}"
  4. focus="{{ field.focus }}"
  5. value="{{ field.value }}"
  6. bind:change="handleFieldChange"
  7. >
  8. </zan-field>
  1. Page({
  2. data:{
  3. field:{
  4. focus:true,
  5. title:'收货人',
  6. placeholder:'名字',
  7. value:'test'
  8. }
  9. }
  10. });

监听事件

field会触发一些事件,当你需要监听这些事件时,可以绑定对应的事件。

  1. <zan-field
  2. title="{{ field.title }}"
  3. placeholder="{{ field.placeholder }}"
  4. focus="{{ field.focus }}"
  5. value="{{ field.value }}"
  6. bind:change="handleFieldChange"
  7. bind:focus="handleFieldFocus"
  8. bind:blur="handleFieldBlur"
  9. >
  10. </zan-field>
  1. Page(extend({},{
  2. data:{
  3. field:{
  4. focus:true,
  5. title:'收货人',
  6. placeholder:'名字',
  7. value:'test'
  8. }
  9. },
  10. methods:{
  11. handleFieldChange(event){
  12. console.log(event);
  13. },
  14. handleFieldFocus(event){
  15. console.log(event);
  16. },
  17. handleFieldBlur(event){
  18. console.log(event);
  19. }
  20. }
  21. }));

API

参数说明类型默认值必须
title输入框左侧标题,若传入为空,则不显示标题String-
name输入框的名字,作为 form 表单提交时数据的 keyStringcomponentId 指定的值
value输入框的内容String-
type输入框的类型,可选值为 input, textareaStringinput
inputType输入框为 input 情况下,输入框的类型,例如:number, text, passwordStringtext
placeholder输入框为空时占位符String
maxlength最大输入长度,设置为 -1 的时候不限制最大长度Number140
focus自动聚焦,拉起键盘Booleanfalse
disabled输入框是否禁用Booleanfalse
mode输入框展示样式,可选值为 wrapped, normalStringnormal
right输入框内容是否居右显示Booleanfalse
error是否显示为输入框错误情况下的样式Booleanfalse
componentId用于区分输入框之间的唯一名称String-

Event

事件名称说明回调参数
change当绑定值变化时触发的事件event对象
focus输入框focusevent对象
blur输入框blurevent对象

Field 输入框 - 图1
微信扫一扫

原文:

https://www.youzanyun.com/zanui/weapp#/zanui/form/field