diff --git a/.eslintrc b/.eslintrc index bae0af3a..4d5b1e7d 100644 --- a/.eslintrc +++ b/.eslintrc @@ -6,7 +6,8 @@ "Page": false, "Component": false, "App": false, - "wx": false + "wx": false, + "Behavior": false }, "parser": "babel-eslint", "rules": { diff --git a/example/pages/btn/index.js b/example/pages/btn/index.js index 454020c0..a697c742 100644 --- a/example/pages/btn/index.js +++ b/example/pages/btn/index.js @@ -2,10 +2,14 @@ Page({ data: { }, - onLoad: function () { + onLoad() { }, - onShow: function() { + onShow() { }, -}) + + getPhoneNumber(e) { + console.log(e); + } +}); diff --git a/example/pages/btn/index.wxml b/example/pages/btn/index.wxml index b4032d5c..be2fad8d 100644 --- a/example/pages/btn/index.wxml +++ b/example/pages/btn/index.wxml @@ -2,7 +2,10 @@ - 取消订单 + 获取电话 确认付款 确认付款 确认付款 diff --git a/example/pages/field/index.json b/example/pages/field/index.json index cc654398..01e279b5 100644 --- a/example/pages/field/index.json +++ b/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" diff --git a/example/pages/field/index.wxml b/example/pages/field/index.wxml index 7d95c1ba..21faf5d0 100644 --- a/example/pages/field/index.wxml +++ b/example/pages/field/index.wxml @@ -30,9 +30,9 @@ - + 清除输入 - + @@ -43,9 +43,9 @@ - + 清除输入 - + @@ -74,10 +74,9 @@ > - - - + + + diff --git a/packages/btn/README.md b/packages/btn/README.md index 6a33c40a..5f2639ea 100644 --- a/packages/btn/README.md +++ b/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 | 当使用开放能力时,发生错误的回调 | | diff --git a/packages/btn/index.js b/packages/btn/index.js index 85044876..f65506f1 100644 --- a/packages/btn/index.js +++ b/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'); }, diff --git a/packages/btn/index.wxml b/packages/btn/index.wxml index 6bbd1437..a1301c48 100644 --- a/packages/btn/index.wxml +++ b/packages/btn/index.wxml @@ -1,8 +1,21 @@ diff --git a/packages/btn/native-button-behaviors.js b/packages/btn/native-button-behaviors.js new file mode 100644 index 00000000..2d4ca93d --- /dev/null +++ b/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); + } + } +}); diff --git a/packages/field/index.js b/packages/field/index.js index 534c16ef..da909fe5 100644 --- a/packages/field/index.js +++ b/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); } } diff --git a/packages/field/index.wxml b/packages/field/index.wxml index 8354c52c..c82854ab 100644 --- a/packages/field/index.wxml +++ b/packages/field/index.wxml @@ -7,7 +7,6 @@ + bindinput="handleFieldChange" + bindfocus="handleFieldFocus" + bindblur="handleFieldBlur" + >