From 2d23fbf888033d4271c6e17db83274ad257a5191 Mon Sep 17 00:00:00 2001
From: Yao <chenyao1102@gmail.com>
Date: Thu, 7 Dec 2017 23:52:58 +0800
Subject: [PATCH] =?UTF-8?q?[improvement]=20Doc:=20=E5=A2=9E=E5=8A=A0=20Fie?=
 =?UTF-8?q?ld=20=E7=BB=84=E4=BB=B6=E6=96=87=E6=A1=A3=20(#73)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add field readme

* update readme

* 补充说明

* pr 模板增加 improvement 类型
---
 .github/PULL_REQUEST_TEMPLATE.md |  2 +-
 packages/field/README.md         | 57 +++++++++++++++++++++++++++++++-
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 24822d2a..d1195ebe 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -3,7 +3,7 @@
 ### 认真写 PR 的标题，会用于生成 change log。
 
 #### 标题规则
-[bug fix / breaking change / new feature] 组件名字：修改内容描述
+[bug fix / breaking change / new feature / improvement] 组件名字：修改内容描述
 
 说明：
 * 前面方括号用来区分 Issue / PR 的 类型：bug fix - 改 bug；breaking change: 不兼容的改动；new feature：新功能
diff --git a/packages/field/README.md b/packages/field/README.md
index 7ba13fb2..565e6520 100644
--- a/packages/field/README.md
+++ b/packages/field/README.md
@@ -1,3 +1,58 @@
 ## Field 输入框
 
-文档补充中
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+在需要使用的页面里引入组件库模板和脚本
+```html
+<import src="path/to/zanui-weapp/dist/field/index.wxml" />
+
+<!-- 直接使用 zan-field 模板，并且直接传入设置值 -->
+<template is="zan-field" data="{{ value }}"></template>
+```
+```js
+const Field = require('path/to/zanui-weapp/dist/field/index');
+
+// 在 Page 中混入 Field 里面声明的方法
+Page(Object.assign({}, Field, {
+  // ...
+}));
+```
+
+### 代码演示
+field 支持多种展示方式，在 `data` 中传入对应的设置即可。
+```html
+<template is="zan-field" data="{{ title: '收货人', type: 'input', placeholder: '名字', value }}"></template>
+```
+
+当 field 触发输入事件时，可以在页面中注册 handleZanFieldChange 方法来监听
+```js
+Page(Object.assign({}, Field, {
+  handleZanFieldChange({ componentId, detail }) {
+    /*
+     * componentId 即为在模板中传入的 componentId
+     * 用于在一个页面上使用多个 tab 时，进行区分
+     * detail 即输入框中的内容
+     */
+    /*
+     * 处理函数可以直接 return 一个字符串，将替换输入框的内容。
+     */
+  }
+}));
+```
+
+`Field` 支持传入参数如下
+
+| 参数       | 说明      | 类型       | 默认值       | 必须      |
+|-----------|-----------|-----------|-------------|-------------|
+| title | 输入框左侧标题，若传入为空，则不显示标题 | String | - | |
+| 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 | |