Skip to content
This repository was archived by the owner on Aug 21, 2019. It is now read-only.

Commit 49db8e9

Browse files
pangxie1991pangxie1991
authored
[improvement] Btn & Field: 支持原生属性 (#219)
* 增加 field 组件 submit 支持 * add new behavior * 增加 btn 支持项 * btn 文档补齐
1 parent 576d90d commit 49db8e9

File tree

11 files changed

+130
-48
lines changed

11 files changed

+130
-48
lines changed

‎.eslintrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"Page": false,
77
"Component": false,
88
"App": false,
9-
"wx": false
9+
"wx": false,
10+
"Behavior": false
1011
},
1112
"parser": "babel-eslint",
1213
"rules": {

‎example/pages/btn/index.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@ Page({
22
data: {
33
},
44

5-
onLoad: function () {
5+
onLoad() {
66

77
},
88

9-
onShow: function() {
9+
onShow() {
1010
},
11-
})
11+
12+
getPhoneNumber(e) {
13+
console.log(e);
14+
}
15+
});

‎example/pages/btn/index.wxml

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22

33
<zan-panel title="普通按钮">
44
<zan-button-group>
5-
<zan-button>取消订单</zan-button>
5+
<zan-button
6+
open-type="getPhoneNumber"
7+
bind:getphonenumber="getPhoneNumber"
8+
>获取电话</zan-button>
69
<zan-button type="primary">确认付款</zan-button>
710
<zan-button type="danger">确认付款</zan-button>
811
<zan-button type="warn">确认付款</zan-button>

‎example/pages/field/index.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"navigationBarTitleText": "Field 输入框",
33
"usingComponents": {
44
"zan-button": "../../dist/btn/index",
5+
"zan-button-group": "../../dist/btn-group/index",
56
"zan-field": "../../dist/field/index",
67
"zan-panel": "../../dist/panel/index",
78
"doc-page": "../../components/doc-page/index"

‎example/pages/field/index.wxml

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@
3030
</zan-field>
3131
</zan-panel>
3232

33-
<view class="zan-btns">
33+
<zan-button-group>
3434
<zan-button type="primary" bind:btnclick="clearInput">清除输入</zan-button>
35-
</view>
35+
</zan-button-group>
3636

3737
<!-- 去除标题后的输入框样式 -->
3838
<zan-panel title="无标题输入框">
@@ -43,9 +43,9 @@
4343
</zan-field>
4444
</zan-panel>
4545

46-
<view class="zan-btns">
46+
<zan-button-group>
4747
<zan-button type="primary" bind:btnclick="clearTextarea">清除输入</zan-button>
48-
</view>
48+
</zan-button-group>
4949

5050
<!-- 使用 Field 圆角样式 -->
5151
<zan-panel title="圆角输入框">
@@ -74,10 +74,9 @@
7474
>
7575
</zan-field>
7676
</zan-panel>
77-
78-
<!-- <view class="zan-panel-title">Form 表单中的field应用</view> -->
79-
<!-- <form bindsubmit="formSubmit" bindreset="formReset">
80-
<view class="zan-panel">
77+
78+
<zan-panel title="Form 表单中的field应用">
79+
<form bindsubmit="formSubmit" bindreset="formReset">
8180
<zan-field
8281
name="{{ config.form.name.name }}"
8382
placeholder="{{ config.form.name.placeholder }}"
@@ -89,14 +88,7 @@
8988
input-type="{{ config.form.tel.inputType }}"
9089
>
9190
</zan-field>
92-
<view class="zan-btns">
93-
<button
94-
class="zan-btn zan-btn--primary"
95-
formType="submit">提交数据</button>
96-
<button
97-
class="zan-btn"
98-
formType="reset">重置数据</button>
99-
</view>
100-
</view>
101-
</form> -->
91+
<button type="primary" form-type="submit">提交表单</button>
92+
</form>
93+
</zan-panel>
10294
</doc-page>

‎packages/btn/README.md

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

‎packages/btn/index.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
const nativeButtonBehavior = require('./native-button-behaviors');
2+
13
Component({
24
externalClasses: ['custom-class'],
5+
behaviors: [nativeButtonBehavior],
36
relations: {
47
'../btn-group/index': {
58
type: 'parent',
@@ -31,10 +34,6 @@ Component({
3134
loading: {
3235
type: Boolean,
3336
value: false,
34-
},
35-
openType: {
36-
type: String,
37-
value: ''
3837
}
3938
},
4039

@@ -45,6 +44,10 @@ Component({
4544

4645
methods: {
4746
handleTap() {
47+
if (this.data.disabled) {
48+
this.triggerEvent('disabledclick')
49+
return;
50+
}
4851
this.triggerEvent('btnclick');
4952
},
5053

‎packages/btn/index.wxml

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
11
<button
22
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' : ''}}"
3-
disabled="{{ disabled }}"
43
open-type="{{ openType }}"
4+
app-parameter="{{ appParameter }}"
5+
hover-stop-propagation="{{ hoverStopPropagation }}"
6+
hover-start-time="{{ hoverStartTime }}"
7+
hover-stay-time="{{ hoverStayTime }}"
8+
lang="{{ lang }}"
9+
session-from="{{ sessionFrom }}"
10+
send-message-title="{{ sendMessageTitle }}"
11+
send-message-path="{{ sendMessagePath }}"
12+
send-message-img="{{ sendMessageImg }}"
13+
show-message-card="{{ showMessageCard }}"
514
bindtap="handleTap"
15+
bindcontact="bindcontact"
16+
bindgetuserinfo="bindgetuserinfo"
17+
bindgetphonenumber="bindgetphonenumber"
18+
binderror="binderror"
619
>
720
<slot></slot>
821
</button>

‎packages/btn/native-button-behaviors.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
module.exports = Behavior({
2+
properties: {
3+
loading: Boolean,
4+
// 在自定义组件中，无法与外界的 form 组件联动，暂时不开放
5+
// formType: String,
6+
openType: String,
7+
appParameter: String,
8+
// 暂时不开放，直接传入无法设置样式
9+
// hoverClass: {
10+
// type: String,
11+
// value: 'button-hover'
12+
// },
13+
hoverStopPropagation: Boolean,
14+
hoverStartTime: {
15+
type: Number,
16+
value: 20
17+
},
18+
hoverStayTime: {
19+
type: Number,
20+
value: 70
21+
},
22+
lang: {
23+
type: String,
24+
value: 'en'
25+
},
26+
sessionFrom: {
27+
type: String,
28+
value: ''
29+
},
30+
sendMessageTitle: String,
31+
sendMessagePath: String,
32+
sendMessageImg: String,
33+
showMessageCard: String
34+
},
35+
methods: {
36+
bindgetuserinfo({ detail = {} } = {}) {
37+
this.triggerEvent('getuserinfo', detail);
38+
},
39+
bindcontact({ detail = {} } = {}) {
40+
this.triggerEvent('contact', detail);
41+
},
42+
bindgetphonenumber({ detail = {} } = {}) {
43+
this.triggerEvent('getphonenumber', detail);
44+
},
45+
binderror({ detail = {} } = {}) {
46+
this.triggerEvent('error', detail);
47+
}
48+
}
49+
});

‎packages/field/index.js

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
Component({
2+
behaviors: ['wx://form-field'],
3+
24
properties: {
35
title: String,
4-
name: String,
56
type: {
67
type: String,
78
value: 'input'
89
},
9-
name: String,
10-
value: String,
1110
disabled: Boolean,
1211
inputType: {
1312
type: String,
@@ -28,20 +27,19 @@ Component({
2827
},
2928

3029
methods: {
31-
handleZanFieldChange(event) {
32-
console.info('[zan:field:change]', event);
30+
handleFieldChange(event) {
31+
const { detail = {} } = event;
32+
const { value = '' } = detail;
33+
this.setData({ value });
34+
3335
this.triggerEvent('change', event);
3436
},
3537

36-
handleZanFieldFocus(event) {
37-
console.info('[zan:field:focus]', event);
38-
38+
handleFieldFocus(event) {
3939
this.triggerEvent('focus', event);
4040
},
4141

42-
handleZanFieldBlur(event) {
43-
console.info('[zan:field:blur]', event);
44-
42+
handleFieldBlur(event) {
4543
this.triggerEvent('blur', event);
4644
}
4745
}

0 commit comments

Comments
 (0)