[improvement] Btn & Field: 支持原生属性 (#219)

* 增加 field 组件 submit 支持

* add new behavior

* 增加 btn 支持项

* btn 文档补齐

.eslintrc

@@ -6,7 +6,8 @@
         "Page": false,
         "Component": false,
         "App": false,
-        "wx": false
+        "wx": false,
+        "Behavior": false
     },
     "parser": "babel-eslint",
     "rules": {

example/pages/btn/index.js

@@ -2,10 +2,14 @@ Page({
   data: {
   },
 
-  onLoad: function () {
+  onLoad() {
 
   },
 
-  onShow: function() {
+  onShow() {
   },
-})
+
+  getPhoneNumber(e) {
+    console.log(e);
+  }
+});

example/pages/btn/index.wxml

@@ -2,7 +2,10 @@
 
   <zan-panel title="普通按钮">
     <zan-button-group>
-      <zan-button>取消订单</zan-button>
+      <zan-button
+        open-type="getPhoneNumber"
+        bind:getphonenumber="getPhoneNumber"
+      >获取电话</zan-button>
       <zan-button type="primary">确认付款</zan-button>
       <zan-button type="danger">确认付款</zan-button>
       <zan-button type="warn">确认付款</zan-button>

example/pages/field/index.json

@@ -2,6 +2,7 @@
   "navigationBarTitleText": "Field 输入框",
   "usingComponents": {
     "zan-button": "../../dist/btn/index",
+    "zan-button-group": "../../dist/btn-group/index",
     "zan-field": "../../dist/field/index",
     "zan-panel": "../../dist/panel/index",
     "doc-page": "../../components/doc-page/index"

example/pages/field/index.wxml

@@ -30,9 +30,9 @@
     </zan-field>
   </zan-panel>
   
-  <view class="zan-btns">
+  <zan-button-group>
     <zan-button type="primary" bind:btnclick="clearInput">清除输入</zan-button>
-  </view>
+  </zan-button-group>
 
   <!-- 去除标题后的输入框样式 -->
   <zan-panel title="无标题输入框">
@@ -43,9 +43,9 @@
     </zan-field>
   </zan-panel>
 
-  <view class="zan-btns">
+  <zan-button-group>
     <zan-button type="primary" bind:btnclick="clearTextarea">清除输入</zan-button>
-  </view>
+  </zan-button-group>
 
   <!-- 使用 Field 圆角样式 -->
   <zan-panel title="圆角输入框">
@@ -74,10 +74,9 @@
     >
     </zan-field>
   </zan-panel>
-  
-  <!-- <view class="zan-panel-title">Form 表单中的field应用</view> -->
-  <!-- <form bindsubmit="formSubmit" bindreset="formReset">
-    <view class="zan-panel">
+
+  <zan-panel title="Form 表单中的field应用">
+    <form bindsubmit="formSubmit" bindreset="formReset">
       <zan-field
         name="{{ config.form.name.name }}"
         placeholder="{{ config.form.name.placeholder }}"
@@ -89,14 +88,7 @@
         input-type="{{ config.form.tel.inputType }}"
       >
       </zan-field>
-      <view class="zan-btns">
-        <button
-          class="zan-btn zan-btn--primary"
-          formType="submit">提交数据</button>
-        <button
-          class="zan-btn"
-          formType="reset">重置数据</button>
-      </view>
-    </view>
-  </form> -->
+      <button type="primary" form-type="submit">提交表单</button>
+    </form>
+  </zan-panel>
 </doc-page>

packages/btn/README.md

@@ -76,3 +76,23 @@
 | plain   | Boolean | 否       | false | 按钮是否镂空，默认为false |
 | disabled | Boolean | 否      | false | 按钮是否禁用，默认为false |
 | loading | Boolean | 否       | false | 按钮加载状态，默认为false |
+| openType | String | 否       | - | 微信开放能力 |
+| appParameter | String | 否   | - | 打开 APP 时，向 APP 传递的参数 |
+| hoverStartTime | Number | 否   | 20 | 按住后多久出现点击态，单位毫秒	 |
+| hoverStayTime | Number | 否   | 70 | 手指松开后点击态保留时间，单位毫秒	 |
+| lang | String | 否   | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 |
+| sessionFrom | String | 否   | - | 会话来源 |
+| sendMessageTitle | String | 否   | 当前标题 | 会话内消息卡片标题 |
+| sendMessagePath | String | 否   | 当前分享路径 | 会话内消息卡片点击跳转小程序路径	 |
+| sendMessageImg | String | 否   | 截图 | 会话内消息卡片图片 |
+| showMessageCard | String | 否   | false | 显示会话内消息卡片 |
+
+### 事件
+| 事件名称       | 说明      | 回调参数       |
+|-----------|-----------|-----------|
+|  btnclick  | 按钮在可用状态被点击时触发 | |
+|  disabledclick  | 在传入的 disabled 为 true 时，点击按钮会触发此事件 | |
+|  getuserinfo  | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同wx.getUserInfo | |
+|  contact  | 客服消息回调 | |
+|  getphonenumber  | 获取用户手机号回调 | |
+|  error  | 当使用开放能力时，发生错误的回调 | |

packages/btn/index.js

@@ -1,5 +1,8 @@
+const nativeButtonBehavior = require('./native-button-behaviors');
+
 Component({
   externalClasses: ['custom-class'],
+  behaviors: [nativeButtonBehavior],
   relations: {
     '../btn-group/index': {
       type: 'parent',
@@ -31,10 +34,6 @@ Component({
     loading: {
       type: Boolean,
       value: false,
-    },
-    openType: {
-      type: String,
-      value: ''
     }
   },
 
@@ -45,6 +44,10 @@ Component({
 
   methods: {
     handleTap() {
+      if (this.data.disabled) {
+        this.triggerEvent('disabledclick')
+        return;
+      }
       this.triggerEvent('btnclick');
     },
 

packages/btn/index.wxml

@@ -1,8 +1,21 @@
 <button 
   class="custom-class zan-btn {{ inGroup ? 'zan-btn--group' : '' }} {{ isLast ? 'zan-btn--last' : '' }} {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
-  disabled="{{ disabled }}"
   open-type="{{ openType }}"
+  app-parameter="{{ appParameter }}"
+  hover-stop-propagation="{{ hoverStopPropagation }}"
+  hover-start-time="{{ hoverStartTime }}"
+  hover-stay-time="{{ hoverStayTime }}"
+  lang="{{ lang }}"
+  session-from="{{ sessionFrom }}"
+  send-message-title="{{ sendMessageTitle }}"
+  send-message-path="{{ sendMessagePath }}"
+  send-message-img="{{ sendMessageImg }}"
+  show-message-card="{{ showMessageCard }}"
   bindtap="handleTap"
+  bindcontact="bindcontact"
+  bindgetuserinfo="bindgetuserinfo"
+  bindgetphonenumber="bindgetphonenumber"
+  binderror="binderror"
 >
   <slot></slot>
 </button>

packages/btn/native-button-behaviors.js

@@ -0,0 +1,49 @@
+module.exports = Behavior({
+  properties: {
+    loading: Boolean,
+    // 在自定义组件中，无法与外界的 form 组件联动，暂时不开放
+    // formType: String,
+    openType: String,
+    appParameter: String,
+    // 暂时不开放，直接传入无法设置样式
+    // hoverClass: {
+    //   type: String,
+    //   value: 'button-hover'
+    // },
+    hoverStopPropagation: Boolean,
+    hoverStartTime: {
+      type: Number,
+      value: 20
+    },
+    hoverStayTime: {
+      type: Number,
+      value: 70
+    },
+    lang: {
+      type: String,
+      value: 'en'
+    },
+    sessionFrom: {
+      type: String,
+      value: ''
+    },
+    sendMessageTitle: String,
+    sendMessagePath: String,
+    sendMessageImg: String,
+    showMessageCard: String
+  },
+  methods: {
+    bindgetuserinfo({ detail = {} } = {}) {
+      this.triggerEvent('getuserinfo', detail);
+    },
+    bindcontact({ detail = {} } = {}) {
+      this.triggerEvent('contact', detail);
+    },
+    bindgetphonenumber({ detail = {} } = {}) {
+      this.triggerEvent('getphonenumber', detail);
+    },
+    binderror({ detail = {} } = {}) {
+      this.triggerEvent('error', detail);
+    }
+  }
+});

packages/field/index.js

@@ -1,13 +1,12 @@
 Component({
+  behaviors: ['wx://form-field'],
+
   properties: {
     title: String,
-    name: String,
     type: {
       type: String,
       value: 'input'
     },
-    name: String,
-    value: String,
     disabled: Boolean,
     inputType: {
       type: String,
@@ -28,20 +27,19 @@ Component({
   },
 
   methods: {
-    handleZanFieldChange(event) {
-      console.info('[zan:field:change]', event);
+    handleFieldChange(event) {
+      const { detail = {} } = event;
+      const { value = '' } = detail;
+      this.setData({ value });
+
       this.triggerEvent('change', event);
     },
 
-    handleZanFieldFocus(event) {
-      console.info('[zan:field:focus]', event);
-
+    handleFieldFocus(event) {
       this.triggerEvent('focus', event);
     },
 
-    handleZanFieldBlur(event) {
-      console.info('[zan:field:blur]', event);
-
+    handleFieldBlur(event) {
       this.triggerEvent('blur', event);
     }
   }

packages/field/index.wxml

@@ -7,7 +7,6 @@
   <textarea
     wx:if="{{ type === 'textarea' }}"
     auto-height
-    name="{{ name || '' }}"
     disabled="{{ disabled }}"
     focus="{{ focus }}"
     value="{{ value }}"
@@ -15,14 +14,13 @@
     maxlength="{{ maxlength }}"
     class="zan-field__input zan-cell__bd {{ right ? 'zan-field__input--right' : '' }}"
     placeholder-class="zan-field__placeholder"
-    bindinput="handleZanFieldChange"
-    bindfocus="handleZanFieldFocus"
-    bindblur="handleZanFieldBlur">
-  </textarea>
+    bindinput="handleFieldChange"
+    bindfocus="handleFieldFocus"
+    bindblur="handleFieldBlur"
+  ></textarea>
   <input
     wx:else
     type="{{ inputType || 'text' }}"
-    name="{{ name || '' }}"
     disabled="{{ disabled }}"
     focus="{{ focus }}"
     value="{{ value }}"
@@ -30,8 +28,8 @@
     maxlength="{{ maxlength }}"
     class="zan-field__input zan-cell__bd {{ right ? 'zan-field__input--right' : '' }}"
     placeholder-class="zan-field__placeholder"
-    bindinput="handleZanFieldChange"
-    bindfocus="handleZanFieldFocus"
-    bindblur="handleZanFieldBlur"
+    bindinput="handleFieldChange"
+    bindfocus="handleFieldFocus"
+    bindblur="handleFieldBlur"
   />
 </view>