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.   },
  11.   methods: {
  12.     handleFieldChange(event) {
  13.       console.log(event);
  14.     },
  16.     handleFieldFocus(event) {
  17.       console.log(event);
  18.     },
  20.     handleFieldBlur(event) {
  21.       console.log(event);
  22.     }
  23.   }
  24. }));

API

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

Event

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

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

原文:

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