[improvement] Field: 新增 Form 支持 (#75)

* feat: field 增加 form 支持 && field 增加 focus blur 支持

* 增加文档说明

* 优化 field 文档

example/pages/field/config.js

@@ -0,0 +1,61 @@
+module.exports = {
+  // 基础类型输入框配置
+  base: {
+    name: {
+      title: '收货人',
+      placeholder: '名字'
+    },
+    tel: {
+      error: true,
+      title: '联系电话',
+      inputType: 'number',
+      placeholder: '请输入手机号'
+    },
+    address: {
+      title: '详细地址',
+      type: 'textarea',
+      placeholder: '请输入详细地址'
+    }
+  },
+  // 无标题输入框
+  notitle: {
+    placeholder: '请输入收货人姓名',
+    componentId: 'textarea:test'
+  },
+  // 圆角输入框
+  radius: {
+    totalPrice: {
+      right: true,
+      mode: 'wrapped',
+      title: '消费总额',
+      inputType: 'number',
+      placeholder: '询问收银员后输入'
+    },
+    excludePrice: {
+      right: true,
+      error: true,
+      mode: 'wrapped',
+      title: '不参与优惠金额',
+      inputType: 'number',
+      placeholder: '询问收银员后输入'
+    },
+    notitle: {
+      mode: 'wrapped',
+      inputType: 'number',
+      placeholder: '请输入消费金额'
+    }
+  },
+  // Form 中使用输入框
+  form: {
+    name: {
+      placeholder: '请输入收货人姓名',
+      componentId: 'form:test:name'
+    },
+    tel: {
+      name: 'tel',
+      inputType: 'tel',
+      placeholder: '请输入收货人手机号码',
+      componentId: 'form:test:tel'
+    }
+  }
+};

example/pages/field/index.js

@@ -1,7 +1,9 @@
-var Zan = require('../../dist/index');
+const Zan = require('../../dist/index');
+const config = require('./config');
 
 Page(Object.assign({}, Zan.Field, {
   data: {
+    config,
     value: 'test',
     textareaValue: 'test textarea',
     area: ['省份', '北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'],
@@ -20,6 +22,18 @@ Page(Object.assign({}, Zan.Field, {
     console.log('[zan:field:change]', componentId, detail);
   },
 
+  handleZanFieldFocus(e) {
+    const { componentId, detail } = e;
+
+    console.log('[zan:field:focus]', componentId, detail);
+  },
+
+  handleZanFieldBlur(e) {
+    const { componentId, detail } = e;
+
+    console.log('[zan:field:blur]', componentId, detail);
+  },
+
   clearInput() {
     this.setData({
       value: ''
@@ -30,5 +44,13 @@ Page(Object.assign({}, Zan.Field, {
     this.setData({
       textareaValue: ''
     });
+  },
+
+  formSubmit(event) {
+    console.log('[zan:field:submit]', event.detail.value);
+  },
+
+  formReset(event) {
+    console.log('[zan:field:reset]', event);
   }
 }));

example/pages/field/index.wxml

@@ -3,30 +3,72 @@
 <view class="container">
   <view class="doc-title">Field</view>
 
+  <!-- Field 基础用法 -->
   <view class="zan-panel-title">基础用法</view>
   <view class="zan-panel">
-    <template is="zan-field" data="{{ title: '收货人', type: 'input', placeholder: '名字', value: value }}"></template>
-    <template is="zan-field" data="{{ title: '联系电话', type: 'input', inputType: 'number', placeholder: '请输入手机号', error: true }}"></template>
-    <template is="zan-field" data="{{ title: '详细地址', type: 'textarea', placeholder: '请输入详细地址' }}"></template>
+    <template
+      is="zan-field"
+      data="{{ ...config.base.name, value }}"></template>
+    <template
+      is="zan-field"
+      data="{{ ...config.base.tel }}"></template>
+    <template
+      is="zan-field"
+      data="{{ ...config.base.address }}"></template>
   </view>
 
   <view class="zan-btns">
-    <button class="zan-btn zan-btn--primary" bindtap="clearInput">清除输入</button>
+    <button
+      class="zan-btn zan-btn--primary"
+      bindtap="clearInput">清除输入</button>
   </view>
 
+  <!-- 去除标题后的输入框样式 -->
   <view class="zan-panel-title">无标题输入框</view>
   <view class="zan-panel">
-    <template is="zan-field" data="{{ type: 'input', placeholder: '请输入收货人姓名', value: textareaValue }}"></template>
+    <template
+      is="zan-field"
+      data="{{ ...config.notitle, value: textareaValue }}"></template>
   </view>
 
   <view class="zan-btns">
-    <button class="zan-btn zan-btn--primary" bindtap="clearTextarea">清除输入</button>
+    <button
+      class="zan-btn zan-btn--primary"
+      bindtap="clearTextarea">清除输入</button>
   </view>
 
+  <!-- 使用 Field 圆角样式 -->
   <view class="zan-panel-title field__title--radius">圆角输入框</view>
-  <template is="zan-field" data="{{ mode: 'wrapped', title: '消费总额', type: 'input', inputType: 'number', placeholder: '询问收银员后输入', right: true }}"></template>
-  <template is="zan-field" data="{{ mode: 'wrapped', title: '不参与优惠金额', type: 'input', inputType: 'number', placeholder: '询问收银员后输入', error: true, right: true }}"></template>
-  <template is="zan-field" data="{{ mode: 'wrapped', type: 'input', inputType: 'number', placeholder: '请输入消费金额' }}"></template>
+  <template
+    is="zan-field"
+    data="{{ ...config.radius.totalPrice }}"></template>
+  <template
+    is="zan-field"
+    data="{{ ...config.radius.excludePrice }}"></template>
+  <template
+    is="zan-field"
+    data="{{ ...config.radius.notitle }}"></template>
+
+  <!-- form 中使用 Field -->
+  <view class="zan-panel-title">Form 表单中的field应用</view>
+  <form bindsubmit="formSubmit" bindreset="formReset">
+    <view class="zan-panel">
+      <template
+        is="zan-field"
+        data="{{ ...config.form.name }}"></template>
+      <template
+        is="zan-field"
+        data="{{ ...config.form.tel }}"></template>
+      <view class="zan-btns">
+        <button
+          class="zan-btn zan-btn--primary"
+          formType="submit">提交数据</button>
+        <button
+          class="zan-btn"
+          formType="reset">重置数据</button>
+      </view>
+    </view>
+  </form>
 
   <view class="zan-panel-title">自定义显示内容</view>
   <view class="zan-panel">

packages/field/README.md

@@ -31,6 +31,7 @@ field 支持多种展示方式，在 `data` 中传入对应的设置即可。
 当 field 触发输入事件时，可以在页面中注册 handleZanFieldChange 方法来监听
 ```js
 Page(Object.assign({}, Field, {
+  // 输入框内容更改时触发
   handleZanFieldChange({ componentId, detail }) {
     /*
      * componentId 即为在模板中传入的 componentId
@@ -40,7 +41,11 @@ Page(Object.assign({}, Field, {
     /*
      * 处理函数可以直接 return 一个字符串，将替换输入框的内容。
      */
-  }
+  },
+  // 输入框聚焦时触发
+  handleZanFieldFocus({ componentId, detail }) {},
+  // 输入框失焦时触发
+  handleZanFieldBlur({ componentId, detail }) {},
 }));
 ```
 
@@ -49,6 +54,7 @@ Page(Object.assign({}, Field, {
 | 参数       | 说明      | 类型       | 默认值       | 必须      |
 |-----------|-----------|-----------|-------------|-------------|
 | title | 输入框左侧标题，若传入为空，则不显示标题 | String | - | |
+| name | 输入框的名字，作为 form 表单提交时数据的 key | String  | componentId 指定的值 | |
 | value | 输入框的内容 | String  | - | |
 | type | 输入框的类型，可选值为 input, textarea | String  | input | |
 | inputType | 输入框为 input 情况下，输入框的类型，例如：number, text, password | String  | text | |
@@ -56,3 +62,4 @@ Page(Object.assign({}, Field, {
 | mode | 输入框展示样式，可选值为 wrapped, normal | String | normal | |
 | right | 输入框内容是否居右显示 | Boolean  | false | |
 | error | 是否显示为输入框错误情况下的样式 | Boolean  | false | |
+| componentId | 用于区分输入框之间的唯一名称 | String  | - | |

packages/field/index.js

@@ -1,14 +1,42 @@
+const { extractComponentId } = require('../utils/index');
+
 module.exports = {
   _handleZanFieldChange(event) {
-    const { componentId } = event.currentTarget.dataset;
+    const componentId = extractComponentId(event);
     event.componentId = componentId;
 
     console.info('[zan:field:change]', event);
 
     if (this.handleZanFieldChange) {
       return this.handleZanFieldChange(event);
-    } else {
-      console.warn('页面缺少 handleZanFieldChange 回调函数');
     }
+
+    console.warn('页面缺少 handleZanFieldChange 回调函数');
+  },
+
+  _handleZanFieldFocus(event) {
+    const componentId = extractComponentId(event);
+    event.componentId = componentId;
+
+    console.info('[zan:field:focus]', event);
+
+    if (this.handleZanFieldFocus) {
+      return this.handleZanFieldFocus(event);
+    }
+
+    console.warn('页面缺少 handleZanFieldFocus 回调函数');
+  },
+
+  _handleZanFieldBlur(event) {
+    const componentId = extractComponentId(event);
+    event.componentId = componentId;
+
+    console.info('[zan:field:blur]', event);
+
+    if (this.handleZanFieldBlur) {
+      return this.handleZanFieldBlur(event);
+    }
+
+    console.warn('页面缺少 handleZanFieldBlur 回调函数');
   }
 };

packages/field/index.wxml

@@ -6,20 +6,26 @@
     <textarea
       wx:if="{{ type === 'textarea' }}"
       auto-height
+      name="{{ name || componentId || '' }}"
       value="{{ value }}"
       placeholder="{{ placeholder }}"
       class="zan-field__input zan-cell__bd {{ right ? 'zan-field__input--right' : '' }}"
       placeholder-class="zan-field__placeholder"
       bindinput="_handleZanFieldChange"
-      data-component-id="{{ componentId }}"></textarea>
+      bindfocus="_handleZanFieldFocus"
+      bindblur="_handleZanFieldBlur"
+      data-component-id="{{ componentId || '' }}"></textarea>
     <input
       wx:else
       type="{{ inputType || 'text' }}"
+      name="{{ name || componentId || '' }}"
       value="{{ value }}"
       placeholder="{{ placeholder }}"
       class="zan-field__input zan-cell__bd {{ right ? 'zan-field__input--right' : '' }}"
       placeholder-class="zan-field__placeholder"
       bindinput="_handleZanFieldChange"
-      data-component-id="{{ componentId }}"/>
+      bindfocus="_handleZanFieldFocus"
+      bindblur="_handleZanFieldBlur"
+      data-component-id="{{ componentId || '' }}"/>
   </view>
 </template>

packages/utils/index.js

@@ -0,0 +1,10 @@
+// 从事件对象中解析得到 componentId
+// 需要在元素上声明 data-component-id
+function extractComponentId(event = {}) {
+  const { dataset: { componentId } } = event.currentTarget || {};
+  return componentId;
+}
+
+module.exports = {
+  extractComponentId
+};