vant-weapp/packages/field

Field 输入框

使用指南

在 app.wxss 中引入组件库所有样式

@import "path/to/zanui-weapp/dist/index.wxss";

在需要使用的页面里引入组件库模板和脚本

<import src="path/to/zanui-weapp/dist/field/index.wxml" />

<!-- 直接使用 zan-field 模板，并且直接传入设置值 -->
<template is="zan-field" data="{{ value }}"></template>

const Field = require('path/to/zanui-weapp/dist/field/index');

// 在 Page 中混入 Field 里面声明的方法
Page(Object.assign({}, Field, {
  // ...
}));

代码演示

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

<template is="zan-field" data="{{ title: '收货人', type: 'input', placeholder: '名字', value }}"></template>

当 field 触发输入事件时，可以在页面中注册 handleZanFieldChange 方法来监听

Page(Object.assign({}, Field, {
  // 输入框内容更改时触发
  handleZanFieldChange({ componentId, detail }) {
    /*
     * componentId 即为在模板中传入的 componentId
     * 用于在一个页面上使用多个 tab 时，进行区分
     * detail 即输入框中的内容
     */
    /*
     * 处理函数可以直接 return 一个字符串，将替换输入框的内容。
     */
  },
  // 输入框聚焦时触发
  handleZanFieldFocus({ componentId, detail }) {},
  // 输入框失焦时触发
  handleZanFieldBlur({ componentId, detail }) {},
}));

Field 支持传入参数如下

参数	说明	类型	默认值	必须
title	输入框左侧标题，若传入为空，则不显示标题	String	-
name	输入框的名字，作为 form 表单提交时数据的 key	String	componentId 指定的值
value	输入框的内容	String	-
type	输入框的类型，可选值为 input, textarea	String	input
inputType	输入框为 input 情况下，输入框的类型，例如：number, text, password	String	text
placeholder	输入框为空时占位符	String
mode	输入框展示样式，可选值为 wrapped, normal	String	normal
right	输入框内容是否居右显示	Boolean	false
error	是否显示为输入框错误情况下的样式	Boolean	false
componentId	用于区分输入框之间的唯一名称	String	-