vant-weapp/packages/field

Field 输入框

使用指南

在 index.json 中引入组件

{
  "usingComponents": {
    "zan-field": "path/to/zanui-weapp/dist/field/index"
  }
}

代码演示

基础用法

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

<zan-field
  title="{{ field.title }}"
  placeholder="{{ field.placeholder }}"
  focus="{{ field.focus }}"
  value="{{ field.value }}"
>
</zan-field>

Page(extend({}, {
  data: {
    field: {
      focus: true,
      title: '收货人',
      placeholder: '名字',
      value: 'test'
    }
  }
}));

监听事件

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

<zan-field
  title="{{ field.title }}"
  placeholder="{{ field.placeholder }}"
  focus="{{ field.focus }}"
  value="{{ field.value }}"
  bind:change="handleFieldChange"
  bind:focus="handleFieldFocus"
  bind:blur="handleFieldBlur"
>
</zan-field>

Page(extend({}, {
  data: {
    field: {
      focus: true,
      title: '收货人',
      placeholder: '名字',
      value: 'test'
    }
  },

  methods: {
    handleFieldChange(event) {
      console.log(event);
    },

    handleFieldFocus(event) {
      console.log(event);
    },

    handleFieldBlur(event) {
      console.log(event);
    }
  }
}));

API

参数	说明	类型	默认值	必须
title	输入框左侧标题，若传入为空，则不显示标题	String	-
name	输入框的名字，作为 form 表单提交时数据的 key	String	componentId 指定的值
value	输入框的内容	String	-
type	输入框的类型，可选值为 input, textarea	String	input
inputType	输入框为 input 情况下，输入框的类型，例如：number, text, password	String	text
placeholder	输入框为空时占位符	String
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对象