diff --git a/.npmignore b/.npmignore
new file mode 100644
index 00000000..b22d8ee4
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1 @@
+changelog.generated.md
diff --git a/docs/markdown/changelog.md b/docs/markdown/changelog.md
index 6698073e..ca27fb42 100644
--- a/docs/markdown/changelog.md
+++ b/docs/markdown/changelog.md
@@ -1,5 +1,31 @@
## 更新日志
+## [v0.4.9](https://github.com/youzan/vant-weapp/tree/v0.4.9)
+`2018-12-07`
+
+**Improvements**
+
+- Tab: 新增 sticky 属性 [\#1019](https://github.com/youzan/vant-weapp/pull/1019)
+- Tab: 新增 swipeable 属性 [\#1019](https://github.com/youzan/vant-weapp/pull/1019)
+- Rate: 新增 icon-class 外部样式类 [\#1026](https://github.com/youzan/vant-weapp/pull/1026)
+- Icon: 优化内部 setData 次数 [\#1009](https://github.com/youzan/vant-weapp/pull/1009)
+- Popup: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
+- Tabbar: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
+- SubmitBar: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
+- ActionSheet: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
+- GoodsAction: 适配 iPhoneX [\#989](https://github.com/youzan/vant-weapp/pull/989)
+
+**Bug Fixes**
+
+- 修复 Collapse 箭头方向错误 [\#1014](https://github.com/youzan/vant-weapp/pull/1014)
+- 修复 Steps 在开发者工具体验评分中提示选择器错误的问题 [\#1015](https://github.com/youzan/vant-weapp/pull/1015)
+- 修复 Stepper 动态设置 value 时禁用状态未更新的问题 [\#1022](https://github.com/youzan/vant-weapp/pull/1022)
+- 修复 Popup 在 iOS 8 下动画错误的问题 [\#1008](https://github.com/youzan/vant-weapp/pull/1008) [\#1029](https://github.com/youzan/vant-weapp/pull/1029)
+- 修复 Transition 在 iOS 8 下动画错误的问题 [\#1008](https://github.com/youzan/vant-weapp/pull/1008) [\#1029](https://github.com/youzan/vant-weapp/pull/1029)
+- 修复 DatetimePicker 动态设置 type 后报错的问题 [\#1004](https://github.com/youzan/vant-weapp/pull/1004)
+- 修复劫持 setData 方法导致无法适配支付宝小程序的问题 [\#1023](https://github.com/youzan/vant-weapp/pull/1023)
+
+
## [v0.4.8](https://github.com/youzan/vant-weapp/tree/v0.4.8)
`2018-12-03`
diff --git a/example/app.json b/example/app.json
index 7eec9973..705fe306 100644
--- a/example/app.json
+++ b/example/app.json
@@ -37,7 +37,8 @@
"pages/swipe-cell/index",
"pages/datetime-picker/index",
"pages/rate/index",
- "pages/collapse/index"
+ "pages/collapse/index",
+ "pages/picker/index"
],
"window": {
"navigationBarBackgroundColor": "#f8f8f8",
@@ -94,6 +95,7 @@
"van-datetime-picker": "../../dist/datetime-picker/index",
"van-rate": "../../dist/rate/index",
"van-collapse": "../../dist/collapse/index",
- "van-collapse-item": "../../dist/collapse-item/index"
+ "van-collapse-item": "../../dist/collapse-item/index",
+ "van-picker": "../../dist/picker/index"
}
}
diff --git a/example/config.js b/example/config.js
index 71feb7aa..69da8fbf 100644
--- a/example/config.js
+++ b/example/config.js
@@ -43,6 +43,10 @@ export default [
path: '/field',
title: 'Field 输入框'
},
+ {
+ path: '/picker',
+ title: 'Picker 选择器'
+ },
{
path: '/radio',
title: 'Radio 单选框'
diff --git a/example/pages/badge/index.wxml b/example/pages/badge/index.wxml
index 7fa324cd..efe5582b 100644
--- a/example/pages/badge/index.wxml
+++ b/example/pages/badge/index.wxml
@@ -4,7 +4,7 @@
-
+
diff --git a/example/pages/button/index.wxml b/example/pages/button/index.wxml
index 495cf2e7..c91445c1 100644
--- a/example/pages/button/index.wxml
+++ b/example/pages/button/index.wxml
@@ -34,5 +34,4 @@
小型按钮
迷你按钮
-
diff --git a/example/pages/card/index.wxml b/example/pages/card/index.wxml
index 25c2aae7..f1a583bb 100644
--- a/example/pages/card/index.wxml
+++ b/example/pages/card/index.wxml
@@ -9,6 +9,15 @@
/>
+
+
+
+
满减
-
- 按钮
- 按钮
+
diff --git a/example/pages/card/index.wxss b/example/pages/card/index.wxss
index f849019b..ed9b38f3 100644
--- a/example/pages/card/index.wxss
+++ b/example/pages/card/index.wxss
@@ -6,3 +6,7 @@
.button {
margin-right: 5px;
}
+
+.van-card__footer {
+ margin-top: 5px;
+}
diff --git a/example/pages/collapse/index.wxml b/example/pages/collapse/index.wxml
index 2a28e4e5..eb69cf73 100644
--- a/example/pages/collapse/index.wxml
+++ b/example/pages/collapse/index.wxml
@@ -1,37 +1,31 @@
- {{ content1 }}
- {{ content2 }}
-
- {{ content3 }}
-
+ {{ content1 }}
+ {{ content2 }}
+ {{ content3 }}
- {{ content1 }}
- {{ content2 }}
- {{ content3 }}
+ {{ content1 }}
+ {{ content2 }}
+ {{ content3 }}
-
+
{{ title1 }}
{{ content1 }}
{{ content2 }}
- {{ content3 }}
+ {{ content3 }}
diff --git a/example/pages/collapse/index.wxss b/example/pages/collapse/index.wxss
index 71c599a9..cad4d831 100644
--- a/example/pages/collapse/index.wxss
+++ b/example/pages/collapse/index.wxss
@@ -1,9 +1,3 @@
-.van-collapse-item__content {
- font-size: 13px;
- line-height: 1.5;
- color: #666;
-}
-
.van-icon-question {
margin-left: 5px;
font-size: 15px !important;
diff --git a/example/pages/picker/index.js b/example/pages/picker/index.js
new file mode 100644
index 00000000..9a9315fa
--- /dev/null
+++ b/example/pages/picker/index.js
@@ -0,0 +1,48 @@
+import Page from '../../common/page';
+import Toast from '../../dist/toast/toast';
+
+Page({
+ data: {
+ column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+ column2: [
+ { text: '杭州', disabled: true },
+ { text: '宁波' },
+ { text: '温州' }
+ ],
+ column3: {
+ 浙江: ['杭州', { text: '宁波' }, { text: '温州', disabled: true }, '嘉兴', '湖州'],
+ 福建: ['福州', '厦门', '莆田', '三明', '泉州']
+ },
+ column4: [
+ {
+ values: ['浙江', '福建'],
+ className: 'column1'
+ },
+ {
+ values: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+ className: 'column2',
+ defaultIndex: 2
+ }
+ ]
+ },
+
+ onChange1(event) {
+ const { value, index } = event.detail;
+ Toast(`Value: ${value}, Index：${index}`);
+ },
+
+ onConfirm(event) {
+ const { value, index } = event.detail;
+ Toast(`Value: ${value}, Index：${index}`);
+ },
+
+ onCancel() {
+ Toast('取消');
+ },
+
+ onChange2(event) {
+ const { picker, value } = event.detail;
+ picker.setColumnValues(1, this.data.column3[value[0]]);
+ getApp().picker = picker;
+ }
+});
diff --git a/example/pages/picker/index.json b/example/pages/picker/index.json
new file mode 100644
index 00000000..a27185db
--- /dev/null
+++ b/example/pages/picker/index.json
@@ -0,0 +1,3 @@
+{
+ "navigationBarTitleText": "Picker 选择器"
+}
diff --git a/example/pages/picker/index.wxml b/example/pages/picker/index.wxml
new file mode 100644
index 00000000..cb6a1b66
--- /dev/null
+++ b/example/pages/picker/index.wxml
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/pages/picker/index.wxss b/example/pages/picker/index.wxss
new file mode 100644
index 00000000..e69de29b
diff --git a/example/pages/stepper/index.wxss b/example/pages/stepper/index.wxss
index 1f476854..27f2c4ac 100644
--- a/example/pages/stepper/index.wxss
+++ b/example/pages/stepper/index.wxss
@@ -1 +1 @@
-/* pages/stepper/index.wxss */
\ No newline at end of file
+/* pages/stepper/index.wxss */
diff --git a/example/pages/switch/index.wxml b/example/pages/switch/index.wxml
index fb342d70..f233dc66 100644
--- a/example/pages/switch/index.wxml
+++ b/example/pages/switch/index.wxml
@@ -21,12 +21,27 @@
/>
-
+
+
+
+
+
+
+
+
+
diff --git a/example/pages/tabbar/index.wxml b/example/pages/tabbar/index.wxml
index 0d7f220a..cf665aae 100644
--- a/example/pages/tabbar/index.wxml
+++ b/example/pages/tabbar/index.wxml
@@ -9,7 +9,7 @@
-
+
自定义
diff --git a/example/pages/tag/index.wxml b/example/pages/tag/index.wxml
index f85b1119..be5d1d13 100644
--- a/example/pages/tag/index.wxml
+++ b/example/pages/tag/index.wxml
@@ -30,7 +30,8 @@
标签
标签
标签
- 标签
+ 标签
+ 标签
diff --git a/example/pages/tree-select/config.js b/example/pages/tree-select/config.js
index 6e1e80ab..7ea405b4 100644
--- a/example/pages/tree-select/config.js
+++ b/example/pages/tree-select/config.js
@@ -27,5 +27,13 @@ export default {
}, {
text: '苏州',
id: 8
+ }],
+ pro3Name: '福建',
+ pro3: [{
+ text: '泉州',
+ id: 9
+ }, {
+ text: '厦门',
+ id: 10
}]
};
diff --git a/example/pages/tree-select/index.js b/example/pages/tree-select/index.js
index e4d8e547..4b0e49ca 100644
--- a/example/pages/tree-select/index.js
+++ b/example/pages/tree-select/index.js
@@ -17,6 +17,10 @@ Page({
}, {
text: config.pro2Name,
children: config.pro2
+ }, {
+ text: config.pro3Name,
+ disabled: true,
+ children: config.pro3
}
],
mainActiveIndex: 0,
diff --git a/example/pages/tree-select/index.wxml b/example/pages/tree-select/index.wxml
index d1754047..ab6cb2fc 100644
--- a/example/pages/tree-select/index.wxml
+++ b/example/pages/tree-select/index.wxml
@@ -5,5 +5,6 @@
active-id="{{ activeId }}"
bind:click-item="onClickItem"
bind:click-nav="onClickNav"
+ content-item-class="content-item-class"
>
diff --git a/example/pages/tree-select/index.wxss b/example/pages/tree-select/index.wxss
index a05c6e76..d57997ae 100644
--- a/example/pages/tree-select/index.wxss
+++ b/example/pages/tree-select/index.wxss
@@ -1 +1 @@
-/* pages/tree-select/index.wxss */
\ No newline at end of file
+/* pages/tree-select/index.wxss */
diff --git a/packages/action-sheet/index.ts b/packages/action-sheet/index.ts
index a1acd00f..8d2ea090 100644
--- a/packages/action-sheet/index.ts
+++ b/packages/action-sheet/index.ts
@@ -1,6 +1,9 @@
import { VantComponent } from '../common/component';
+import { iphonex } from '../mixins/iphonex';
VantComponent({
+ mixins: [iphonex],
+
props: {
show: Boolean,
title: String,
@@ -20,10 +23,6 @@ VantComponent({
closeOnClickOverlay: {
type: Boolean,
value: true
- },
- safeAreaInsetBottom: {
- type: Boolean,
- value: true
}
},
diff --git a/packages/area/index.less b/packages/area/index.less
index 72b95115..b82bf76d 100644
--- a/packages/area/index.less
+++ b/packages/area/index.less
@@ -57,11 +57,10 @@
&__item {
padding: 0 5px;
- color: @gray-dark;
+ color: @text-color;
&--selected {
font-weight: 500;
- color: @text-color;
}
&--disabled {
diff --git a/packages/area/index.ts b/packages/area/index.ts
index c3e0727e..c4f28f73 100644
--- a/packages/area/index.ts
+++ b/packages/area/index.ts
@@ -33,13 +33,6 @@ VantComponent({
columns: []
},
- computed: {
- displayColumns() {
- const { columns = [], columnsNum } = this.data;
- return columns.slice(0, +columnsNum);
- }
- },
-
watch: {
value(value) {
this.code = value;
@@ -68,7 +61,8 @@ VantComponent({
onChange(event: Weapp.Event) {
const { value } = event.detail;
- const { pickerValue, displayColumns } = this.data;
+ const { pickerValue } = this.data;
+ const displayColumns = this.getDisplayColumns();
const index = pickerValue.findIndex(
(item, index) => item !== value[index]
);
@@ -159,7 +153,8 @@ VantComponent({
},
getValues() {
- const { displayColumns = [], pickerValue = [] } = this.data;
+ const { pickerValue = [] } = this.data;
+ const displayColumns = this.getDisplayColumns();
return displayColumns
.map((option, index) => option[pickerValue[index]])
.filter(value => !!value);
@@ -201,6 +196,11 @@ VantComponent({
reset() {
this.code = '';
this.setValues();
+ },
+
+ getDisplayColumns() {
+ const { columns = [], columnsNum } = this.data;
+ return columns.slice(0, +columnsNum);
}
}
});
diff --git a/packages/area/index.wxml b/packages/area/index.wxml
index cf401704..bec4249b 100644
--- a/packages/area/index.wxml
+++ b/packages/area/index.wxml
@@ -17,7 +17,8 @@
class="van-picker__columns"
>
-
+
```
diff --git a/packages/badge/index.json b/packages/badge/index.json
index 467ce294..bf0ebe00 100644
--- a/packages/badge/index.json
+++ b/packages/badge/index.json
@@ -1,3 +1,6 @@
{
- "component": true
+ "component": true,
+ "usingComponents": {
+ "van-info": "../info/index"
+ }
}
diff --git a/packages/badge/index.less b/packages/badge/index.less
index 7d7b233f..2b3939f4 100644
--- a/packages/badge/index.less
+++ b/packages/badge/index.less
@@ -36,20 +36,7 @@
}
}
- &__info {
- position: absolute;
- top: 4px;
- right: 2px;
- color: @white;
- font-size: 12px;
- font-weight: 500;
- transform: scale(0.8);
- text-align: center;
- box-sizing: border-box;
- padding: 0 6px;
- min-width: 18px;
- line-height: 18px;
- border-radius: 9px;
- background-color: @red;
+ &__text {
+ position: relative;
}
}
diff --git a/packages/badge/index.ts b/packages/badge/index.ts
index 2bf4168f..c8857364 100644
--- a/packages/badge/index.ts
+++ b/packages/badge/index.ts
@@ -7,7 +7,7 @@ VantComponent({
},
props: {
- info: Number,
+ info: null,
title: String
},
diff --git a/packages/badge/index.wxml b/packages/badge/index.wxml
index 3e55ca3a..425b4739 100644
--- a/packages/badge/index.wxml
+++ b/packages/badge/index.wxml
@@ -1,4 +1,10 @@
- {{ info }}
- {{ title }}
+
+
+ {{ title }}
+
diff --git a/packages/button/index.ts b/packages/button/index.ts
index ccc246e9..94b03143 100644
--- a/packages/button/index.ts
+++ b/packages/button/index.ts
@@ -24,21 +24,6 @@ VantComponent({
}
},
- computed: {
- classes(): string {
- const { type, size, block, plain, round, square, loading, disabled } = this.data;
- return this.classNames('van-button', `van-button--${type}`, `van-button--${size}`, {
- 'van-button--block': block,
- 'van-button--round': round,
- 'van-button--plain': plain,
- 'van-button--square': square,
- 'van-button--loading': loading,
- 'van-button--disabled': disabled,
- 'van-button--unclickable': disabled || loading
- });
- }
- },
-
methods: {
onClick() {
if (!this.data.disabled && !this.data.loading) {
diff --git a/packages/button/index.wxml b/packages/button/index.wxml
index 3480f938..63817067 100644
--- a/packages/button/index.wxml
+++ b/packages/button/index.wxml
@@ -1,7 +1,9 @@
+
+
-
+
-
- {{ title }}
-
+ {{ title }}
+
- {{ desc }}
-
+ {{ desc }}
+
-
-
-
+
+
+
{{ currency }} {{ price }}
{{ currency }} {{ originPrice }}
x {{ num }}
diff --git a/packages/cell/index.ts b/packages/cell/index.ts
index 5487f9f2..70b717bf 100644
--- a/packages/cell/index.ts
+++ b/packages/cell/index.ts
@@ -30,24 +30,6 @@ VantComponent({
}
},
- computed: {
- cellClass(): string {
- const { data } = this;
- return this.classNames('van-cell', {
- 'van-cell--center': data.center,
- 'van-cell--required': data.required,
- 'van-cell--borderless': !data.border,
- 'van-cell--clickable': data.isLink || data.clickable,
- [`van-cell--${data.size}`]: data.size
- });
- },
-
- titleStyle(): string {
- const { titleWidth } = this.data;
- return titleWidth ? `max-width: ${titleWidth};min-width: ${titleWidth}` : '';
- }
- },
-
methods: {
onClick(event: Weapp.Event) {
this.$emit('click', event.detail);
diff --git a/packages/cell/index.wxml b/packages/cell/index.wxml
index bdea77b0..caee22b6 100644
--- a/packages/cell/index.wxml
+++ b/packages/cell/index.wxml
@@ -1,5 +1,7 @@
+
+
@@ -12,7 +14,7 @@
diff --git a/packages/checkbox-group/index.ts b/packages/checkbox-group/index.ts
index 0e118056..6cffcfdb 100644
--- a/packages/checkbox-group/index.ts
+++ b/packages/checkbox-group/index.ts
@@ -16,9 +16,9 @@ VantComponent({
},
props: {
+ max: Number,
value: Array,
- disabled: Boolean,
- max: Number
+ disabled: Boolean
},
watch: {
diff --git a/packages/checkbox/index.less b/packages/checkbox/index.less
index 1f0df9d3..2f62da7e 100644
--- a/packages/checkbox/index.less
+++ b/packages/checkbox/index.less
@@ -1,7 +1,5 @@
@import '../common/style/var.less';
-@checkbox-size: 20px;
-
.van-checkbox {
overflow: hidden;
user-select: none;
@@ -14,15 +12,15 @@
}
&__icon {
- box-sizing: border-box;
display: block;
+ font-size: 14px;
width: @checkbox-size;
height: @checkbox-size;
- border: 1px solid @gray-light;
color: transparent;
- font-size: 14px;
text-align: center;
- transition: .2s;
+ box-sizing: border-box;
+ border: 1px solid @checkbox-border-color;
+ transition: @checkbox-transition-duration;
&--round {
border-radius: 100%;
@@ -30,28 +28,31 @@
&--checked {
color: @white;
- border-color: @blue;
- background-color: @blue;
+ border-color: @checkbox-checked-icon-color;
+ background-color: @checkbox-checked-icon-color;
}
&--disabled {
- border-color: @border-color;
- background-color: currentColor;
- color: @background-color;
+ border-color: @checkbox-disabled-icon-color;
+ background-color: @checkbox-disabled-background-color;
}
&--disabled&--checked {
- border-color: @border-color;
- background-color: @border-color;
+ color: @checkbox-disabled-icon-color;
}
}
&__label {
- margin-left: 10px;
+ color: @checkbox-label-color;
+ margin-left: @checkbox-label-margin;
&--left {
- margin: 0 10px 0 0;
float: left;
+ margin: 0 @checkbox-label-margin 0 0;
+ }
+
+ &--disabled {
+ color: @checkbox-disabled-label-color;
}
&:empty {
diff --git a/packages/checkbox/index.ts b/packages/checkbox/index.ts
index 397a9097..73234ee8 100644
--- a/packages/checkbox/index.ts
+++ b/packages/checkbox/index.ts
@@ -23,28 +23,6 @@ VantComponent({
}
},
- computed: {
- iconClass(): string {
- const { disabled, value, shape } = this.data;
- return this.classNames(
- 'van-checkbox__icon',
- `van-checkbox__icon--${shape}`,
- {
- 'van-checkbox__icon--disabled': disabled,
- 'van-checkbox__icon--checked': value
- }
- );
- },
-
- iconStyle(): string {
- const { value, disabled, checkedColor } = this.data;
- if (checkedColor && value && !disabled) {
- return `border-color: ${checkedColor}; background-color: ${checkedColor}`;
- }
- return '';
- }
- },
-
methods: {
emitChange(value) {
const parent = this.getRelationNodes('../checkbox-group/index')[0];
diff --git a/packages/checkbox/index.wxml b/packages/checkbox/index.wxml
index ab5637a9..1659ba43 100644
--- a/packages/checkbox/index.wxml
+++ b/packages/checkbox/index.wxml
@@ -1,16 +1,18 @@
+
+
-
+
diff --git a/packages/col/index.ts b/packages/col/index.ts
index e8577da2..cc5bb20a 100644
--- a/packages/col/index.ts
+++ b/packages/col/index.ts
@@ -15,16 +15,6 @@ VantComponent({
style: ''
},
- computed: {
- classes(): string {
- const { span, offset } = this.data;
- return this.classNames('van-col', {
- [`van-col--${span}`]: span,
- [`van-col--offset-${offset}`]: offset
- });
- }
- },
-
methods: {
setGutter(gutter: number) {
const padding = `${gutter / 2}px`;
diff --git a/packages/col/index.wxml b/packages/col/index.wxml
index 69e74b16..a759aac5 100644
--- a/packages/col/index.wxml
+++ b/packages/col/index.wxml
@@ -1,5 +1,7 @@
+
+
diff --git a/packages/collapse-item/index.less b/packages/collapse-item/index.less
index e883feb2..db118a46 100644
--- a/packages/collapse-item/index.less
+++ b/packages/collapse-item/index.less
@@ -4,7 +4,7 @@
&__title {
.van-cell__right-icon {
transform: rotate(90deg);
- transition: 0.3s;
+ transition: @collapse-item-transition-duration;
}
&--expanded {
@@ -14,12 +14,12 @@
}
&--disabled {
- & .van-cell,
- & .van-cell__right-icon {
- color: @gray !important;
+ .van-cell,
+ .van-cell__right-icon {
+ color: @collapse-item-title-disabled-color !important;
}
- &:active {
+ .van-cell:active {
background-color: @white !important;
}
}
@@ -28,11 +28,14 @@
&__wrapper {
overflow: hidden;
will-change: max-height;
- transition: max-height 0.3s ease-in-out;
+ transition: max-height @collapse-item-transition-duration ease-in-out;
}
&__content {
- padding: 15px;
- background-color: @white;
+ color: @collapse-item-content-text-color;
+ padding: @collapse-item-content-padding;
+ font-size: @collapse-item-content-font-size;
+ line-height: @collapse-item-content-line-height;
+ background-color: @collapse-item-content-background-color;
}
}
diff --git a/packages/collapse-item/index.ts b/packages/collapse-item/index.ts
index 85393c6c..55394096 100644
--- a/packages/collapse-item/index.ts
+++ b/packages/collapse-item/index.ts
@@ -12,11 +12,11 @@ VantComponent({
},
props: {
- name: [String, Number],
+ name: null,
+ title: null,
+ value: null,
icon: String,
label: String,
- title: [String, Number],
- value: [String, Number],
disabled: Boolean,
border: {
type: Boolean,
@@ -33,16 +33,6 @@ VantComponent({
expanded: false
},
- computed: {
- titleClass() {
- const { disabled, expanded } = this.data;
- return this.classNames('van-collapse-item__title', {
- 'van-collapse-item__title--disabled': disabled,
- 'van-collapse-item__title--expanded': expanded
- });
- }
- },
-
methods: {
updateExpanded() {
if (!this.parent) {
@@ -68,11 +58,9 @@ VantComponent({
updateStyle(expanded) {
if (expanded) {
- this.getRect('.van-collapse-item__content').then(res => {
- this.set({
- contentHeight: res.height ? res.height + 'px' : null
+ this.set({
+ contentHeight: 'auto'
});
- });
} else {
this.set({
contentHeight: 0
diff --git a/packages/collapse-item/index.wxml b/packages/collapse-item/index.wxml
index 6bf5ff10..4f51da13 100644
--- a/packages/collapse-item/index.wxml
+++ b/packages/collapse-item/index.wxml
@@ -1,3 +1,5 @@
+
+
```
-
+``` javascript
+Page({
+ data: {
+ activeName: ['1']
+ },
+ onChange(event) {
+ this.setData({
+ activeNames: event.detail
+ });
+ }
+});
+```
### Collapse API
diff --git a/packages/common/class-names.ts b/packages/common/class-names.ts
deleted file mode 100644
index 5c8e65d0..00000000
--- a/packages/common/class-names.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-const hasOwn = {}.hasOwnProperty;
-
-export function classNames(): string {
- const classes = [];
-
- for (let i = 0; i < arguments.length; i++) {
- const arg = arguments[i];
- if (!arg) continue;
-
- const argType = typeof arg;
-
- if (argType === 'string' || argType === 'number') {
- classes.push(arg);
- } else if (Array.isArray(arg) && arg.length) {
- const inner = classNames.apply(null, arg);
- if (inner) {
- classes.push(inner);
- }
- } else if (argType === 'object') {
- for (const key in arg) {
- if (hasOwn.call(arg, key) && arg[key]) {
- classes.push(key);
- }
- }
- }
- }
-
- return classes.join(' ');
-};
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index b313db8e..b0beb322 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -37,11 +37,58 @@
@button-bottom-action-primary-color: @white;
@button-bottom-action-primary-background-color: @red;
+// Checkbox
+@checkbox-size: 20px;
+@checkbox-border-color: @gray-light;
+@checkbox-transition-duration: .2s;
+@checkbox-label-margin: 10px;
+@checkbox-label-color: @text-color;
+@checkbox-checked-icon-color: @blue;
+@checkbox-disabled-icon-color: @gray;
+@checkbox-disabled-label-color: @gray;
+@checkbox-disabled-background-color: @border-color;
+
+// Collapse
+@collapse-item-transition-duration: .3s;
+@collapse-item-content-padding: 15px;
+@collapse-item-content-font-size: 13px;
+@collapse-item-content-line-height: 1.5;
+@collapse-item-content-text-color: @gray-dark;
+@collapse-item-content-background-color: @white;
+@collapse-item-title-disabled-color: @gray;
+
+// Info
+@info-size: 16px;
+@info-color: @white;
+@info-padding: 0 3px;
+@info-font-size: 12px;
+@info-font-weight: 500;
+@info-border-width: 1px;
+@info-background-color: @red;
+@info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
+
// Notify
@notify-padding: 6px 15px;
@notify-font-size: 14px;
@notify-line-height: 20px;
+// Switch
+@switch-width: 2em;
+@switch-height: 1em;
+@switch-node-size: 1em;
+@switch-node-z-index: 1;
+@switch-node-background-color: @white;
+@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
+@switch-background-color: @white;
+@switch-on-background-color: @blue;
+@switch-transition-duration: .3s;
+@switch-disabled-opacity: .4;
+@switch-border: 1px solid rgba(0, 0, 0, .1);
+
+// SwitchCell
+@switch-cell-padding-top: 9px;
+@switch-cell-padding-bottom: 9px;
+
// Toast
@toast-max-width: 70%;
@toast-font-size: 14px;
@@ -49,7 +96,7 @@
@toast-line-height: 20px;
@toast-border-radius: 4px;
@toast-background-color: rgba(0, 0, 0, .7);
-@toast-icon-size: 50px;
+@toast-icon-size: 48px;
@toast-text-min-width: 96px;
@toast-text-padding: 8px 12px;
@toast-default-padding: 15px;
diff --git a/packages/common/utils.ts b/packages/common/utils.ts
index 765c483d..f9ff1eb2 100644
--- a/packages/common/utils.ts
+++ b/packages/common/utils.ts
@@ -11,8 +11,13 @@ function isNumber(value) {
return /^\d+$/.test(value);
}
+function range(num: number, min: number, max: number) {
+ return Math.min(Math.max(num, min), max);
+}
+
export {
isObj,
isDef,
- isNumber
+ isNumber,
+ range
};
diff --git a/packages/common/utils.wxs b/packages/common/utils.wxs
deleted file mode 100644
index 6435ac9e..00000000
--- a/packages/common/utils.wxs
+++ /dev/null
@@ -1,5 +0,0 @@
-function isSrc(url) {
- return url.indexOf('http') === 0 || url.indexOf('data:image') === 0;
-}
-
-module.exports.isSrc = isSrc;
diff --git a/packages/datetime-picker/README.md b/packages/datetime-picker/README.md
index 2bd6a466..b604be70 100644
--- a/packages/datetime-picker/README.md
+++ b/packages/datetime-picker/README.md
@@ -13,6 +13,8 @@
#### 选择完整时间
+`value` 为时间戳
+
```html
`time` `year-month` | `String` | `datetime` |
+| value | 当前选中值 | `String | Number` | - |
+| type | 类型，可选值为 `date` `time` `year-month`
不建议动态修改 | `String` | `datetime` |
| min-date | 可选的最小时间，精确到分钟 | `Number` | 十年前 |
| max-date | 可选的最大时间，精确到分钟 | `Number` | 十年后 |
| min-hour | 可选的最小小时，针对 time 类型 | `Number` | `0` |
diff --git a/packages/dialog/README.md b/packages/dialog/README.md
index 0b808f44..aa6c0e1b 100644
--- a/packages/dialog/README.md
+++ b/packages/dialog/README.md
@@ -39,6 +39,7 @@ Dialog.alert({
```
#### 消息确认
+
用于确认消息，包含取消和确认按钮
```javascript
@@ -127,6 +128,7 @@ Page({
|-----------|-----------|-----------|-------------|
| title | 标题 | `String` | - |
| message | 内容 | `String` | - |
+| messageAlign | 内容对齐方式，可选值为`left` `right` | `String` | `center` |
| zIndex | z-index 层级 | `Number` | `100` |
| selector | 自定义选择器 | `String` | `van-dialog` |
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` |
@@ -149,6 +151,7 @@ Page({
| show | 是否显示弹窗 | `Boolean` | - |
| title | 标题 | `String` | - |
| message | 内容 | `String` | - |
+| message-align | 内容对齐方式，可选值为`left` `right` | `String` | `center` |
| z-index | z-index 层级 | `Number` | `100` |
| show-confirm-button | 是否展示确认按钮 | `Boolean` | `true` |
| show-cancel-button | 是否展示取消按钮 | `Boolean` | `false` |
diff --git a/packages/dialog/dialog.ts b/packages/dialog/dialog.ts
index ebd53622..f8c30609 100644
--- a/packages/dialog/dialog.ts
+++ b/packages/dialog/dialog.ts
@@ -11,6 +11,7 @@ type DialogOptions = {
selector?: string;
transition?: string;
asyncClose?: boolean;
+ messageAlign?: string;
confirmButtonText?: string;
cancelButtonText?: string;
showConfirmButton?: boolean;
@@ -68,6 +69,7 @@ Dialog.defaultOptions = {
zIndex: 100,
overlay: true,
asyncClose: false,
+ messageAlign: '',
transition: 'scale',
selector: '#van-dialog',
confirmButtonText: '确认',
diff --git a/packages/dialog/index.less b/packages/dialog/index.less
index f5a8dfdc..610d8c36 100644
--- a/packages/dialog/index.less
+++ b/packages/dialog/index.less
@@ -23,12 +23,21 @@
line-height: 1.5;
max-height: 60vh;
overflow-y: auto;
+ text-align: center;
-webkit-overflow-scrolling: touch;
&--has-title {
padding-top: 12px;
color: @gray-darker;
}
+
+ &--left {
+ text-align: left;
+ }
+
+ &--right {
+ text-align: right;
+ }
}
&__footer {
diff --git a/packages/dialog/index.ts b/packages/dialog/index.ts
index 948097fa..ff75ba48 100644
--- a/packages/dialog/index.ts
+++ b/packages/dialog/index.ts
@@ -10,6 +10,7 @@ VantComponent({
message: String,
useSlot: Boolean,
asyncClose: Boolean,
+ messageAlign: String,
showCancelButton: Boolean,
closeOnClickOverlay: Boolean,
confirmButtonOpenType: String,
@@ -95,7 +96,9 @@ VantComponent({
this.close();
}
this.$emit('close', action);
- this.$emit(action);
+
+ //把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
+ this.$emit(action, { dialog: this });
const callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel'];
if (callback) {
diff --git a/packages/dialog/index.wxml b/packages/dialog/index.wxml
index 71edae7a..fe890fd0 100644
--- a/packages/dialog/index.wxml
+++ b/packages/dialog/index.wxml
@@ -17,7 +17,7 @@
{{ message }}
diff --git a/packages/field/README.md b/packages/field/README.md
index 3d88f08e..12d88dba 100644
--- a/packages/field/README.md
+++ b/packages/field/README.md
@@ -164,6 +164,7 @@ Page({
| adjust-position | 键盘弹起时，是否自动上推页面 | `Boolean` | `true` |
| use-icon-slot | 是否使用 icon slot | `Boolean` | `false` |
| use-button-slot | 是否使用 button slot | `Boolean` | `false` |
+| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效 | `Boolean` | `true` |
### Event
diff --git a/packages/field/index.less b/packages/field/index.less
index 5c225f81..2bb7876c 100644
--- a/packages/field/index.less
+++ b/packages/field/index.less
@@ -37,6 +37,10 @@
&--right {
text-align: right;
}
+
+ &--error {
+ color: @red;
+ }
}
&__clear-root {
@@ -78,8 +82,4 @@
font-size: 12px;
text-align: left;
}
-
- &--error {
- color: @red;
- }
}
diff --git a/packages/field/index.ts b/packages/field/index.ts
index 1e3c2291..f25bad44 100644
--- a/packages/field/index.ts
+++ b/packages/field/index.ts
@@ -29,6 +29,10 @@ VantComponent({
customStyle: String,
useIconSlot: Boolean,
useButtonSlot: Boolean,
+ showConfirmBar: {
+ type: Boolean,
+ value: true
+ },
placeholderStyle: String,
adjustPosition: {
type: Boolean,
@@ -60,18 +64,6 @@ VantComponent({
showClear: false
},
- computed: {
- inputClass(): string {
- const { data } = this;
- return this.classNames('input-class', 'van-field__input', {
- 'van-field--error': data.error,
- 'van-field__textarea': data.type === 'textarea',
- 'van-field__input--disabled': data.disabled,
- [`van-field__input--${data.inputAlign}`]: data.inputAlign
- });
- }
- },
-
beforeCreate() {
this.focused = false;
},
diff --git a/packages/field/index.wxml b/packages/field/index.wxml
index 61cd6985..e1205906 100644
--- a/packages/field/index.wxml
+++ b/packages/field/index.wxml
@@ -1,3 +1,5 @@
+
+
+
+
+
diff --git a/packages/icon/index.json b/packages/icon/index.json
index 467ce294..bf0ebe00 100644
--- a/packages/icon/index.json
+++ b/packages/icon/index.json
@@ -1,3 +1,6 @@
{
- "component": true
+ "component": true,
+ "usingComponents": {
+ "van-info": "../info/index"
+ }
}
diff --git a/packages/icon/index.less b/packages/icon/index.less
index 85de28bd..9ee115e6 100644
--- a/packages/icon/index.less
+++ b/packages/icon/index.less
@@ -30,26 +30,6 @@
}
}
- &__info {
- position: absolute;
- right: 0;
- top: -8px;
- color: @white;
- font-size: 12px;
- font-weight: 500;
- font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
- text-align: center;
- box-sizing: border-box;
- padding: 0 3px;
- min-width: 16px;
- line-height: 14px;
- border: 1px solid @white;
- border-radius: 16px;
- background-color: @red;
- transform: translateX(50%);
- transform-origin: 100%;
- }
-
&::before {
display: inline-block;
}
diff --git a/packages/icon/index.wxml b/packages/icon/index.wxml
index aefcdebf..0c37bcd3 100644
--- a/packages/icon/index.wxml
+++ b/packages/icon/index.wxml
@@ -1,18 +1,16 @@
+
+
-
- {{ info }}
-
+ info="{{ info }}"
+ />
-
-
diff --git a/packages/info/index.json b/packages/info/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/info/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/packages/info/index.less b/packages/info/index.less
new file mode 100644
index 00000000..86d50e88
--- /dev/null
+++ b/packages/info/index.less
@@ -0,0 +1,21 @@
+@import '../common/style/var.less';
+
+.van-info {
+ position: absolute;
+ right: 0;
+ top: -@info-size / 2;
+ color: @info-color;
+ font-size: @info-font-size;
+ font-weight: @info-font-weight;
+ font-family: @info-font-family;
+ text-align: center;
+ box-sizing: border-box;
+ padding: @info-padding;
+ min-width: @info-size;
+ line-height: @info-size - @info-border-width * 2;
+ border: @info-border-width solid @white;
+ border-radius: @info-size;
+ background-color: @info-background-color;
+ transform: translateX(50%);
+ transform-origin: 100%;
+}
diff --git a/packages/info/index.ts b/packages/info/index.ts
new file mode 100644
index 00000000..a90bcf73
--- /dev/null
+++ b/packages/info/index.ts
@@ -0,0 +1,8 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+ props: {
+ info: null,
+ customStyle: String
+ }
+});
diff --git a/packages/info/index.wxml b/packages/info/index.wxml
new file mode 100644
index 00000000..7deb39b0
--- /dev/null
+++ b/packages/info/index.wxml
@@ -0,0 +1,7 @@
+
+ {{ info }}
+
diff --git a/packages/mixins/basic.ts b/packages/mixins/basic.ts
index 9d6f5b21..7de3fbfa 100644
--- a/packages/mixins/basic.ts
+++ b/packages/mixins/basic.ts
@@ -1,24 +1,5 @@
-import { classNames } from '../common/class-names';
-
export const basic = Behavior({
- created() {
- wx.getSystemInfo({
- success: ({ model, screenHeight }) => {
- const isIphoneX = /iphone x/i.test(model);
- const isIphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
-
- if (isIphoneX || isIphoneNew) {
- this.set({
- isIPhoneX: true
- });
- }
- }
- });
- },
-
methods: {
- classNames,
-
$emit() {
this.triggerEvent.apply(this, arguments);
},
diff --git a/packages/mixins/iphonex.ts b/packages/mixins/iphonex.ts
new file mode 100644
index 00000000..4a23ed7d
--- /dev/null
+++ b/packages/mixins/iphonex.ts
@@ -0,0 +1,34 @@
+let isIPhoneX = null;
+
+function getIsIPhoneX() {
+ return new Promise((resolve, reject) => {
+ if (isIPhoneX !== null) {
+ resolve(isIPhoneX);
+ } else {
+ wx.getSystemInfo({
+ success: ({ model, screenHeight }) => {
+ const iphoneX = /iphone x/i.test(model);
+ const iphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
+ isIPhoneX = iphoneX || iphoneNew;
+ resolve(isIPhoneX);
+ },
+ fail: reject
+ });
+ }
+ });
+}
+
+export const iphonex = Behavior({
+ properties: {
+ safeAreaInsetBottom: {
+ type: Boolean,
+ value: true
+ }
+ },
+
+ created() {
+ getIsIPhoneX().then(isIPhoneX => {
+ this.set({ isIPhoneX });
+ });
+ }
+});
diff --git a/packages/picker-column/index.json b/packages/picker-column/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/picker-column/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
\ No newline at end of file
diff --git a/packages/picker-column/index.less b/packages/picker-column/index.less
new file mode 100644
index 00000000..d986b4fc
--- /dev/null
+++ b/packages/picker-column/index.less
@@ -0,0 +1,21 @@
+@import '../common/style/var';
+
+.van-picker-column {
+ overflow: hidden;
+ font-size: 16px;
+ text-align: center;
+
+ &__item {
+ padding: 0 5px;
+ color: @gray-dark;
+
+ &--selected {
+ font-weight: 500;
+ color: @text-color;
+ }
+
+ &--disabled {
+ opacity: 0.3;
+ }
+ }
+}
diff --git a/packages/picker-column/index.ts b/packages/picker-column/index.ts
new file mode 100644
index 00000000..668c3876
--- /dev/null
+++ b/packages/picker-column/index.ts
@@ -0,0 +1,160 @@
+import { VantComponent } from '../common/component';
+import { isObj, range } from '../common/utils';
+
+const DEFAULT_DURATION = 200;
+
+VantComponent({
+ classes: ['active-class'],
+
+ props: {
+ valueKey: String,
+ className: String,
+ itemHeight: Number,
+ visibleItemCount: Number,
+ initialOptions: {
+ type: Array,
+ value: []
+ },
+ defaultIndex: {
+ type: Number,
+ value: 0
+ }
+ },
+
+ data: {
+ startY: 0,
+ offset: 0,
+ duration: 0,
+ startOffset: 0,
+ options: [],
+ currentIndex: 0
+ },
+
+ created() {
+ const { defaultIndex, initialOptions } = this.data;
+ this.set({
+ currentIndex: defaultIndex,
+ options: initialOptions
+ });
+ },
+
+ computed: {
+ count() {
+ return this.data.options.length;
+ },
+
+ baseOffset() {
+ const { data } = this;
+ return (data.itemHeight * (data.visibleItemCount - 1)) / 2;
+ },
+
+ wrapperStyle() {
+ const { data } = this;
+ return [
+ `transition: ${data.duration}ms`,
+ `transform: translate3d(0, ${data.offset + data.baseOffset}px, 0)`,
+ `line-height: ${data.itemHeight}px`
+ ].join('; ');
+ }
+ },
+
+ watch: {
+ defaultIndex(value: number) {
+ this.setIndex(value);
+ }
+ },
+
+ methods: {
+ onTouchStart(event: Weapp.TouchEvent) {
+ this.set({
+ startY: event.touches[0].clientY,
+ startOffset: this.data.offset,
+ duration: 0
+ });
+ },
+
+ onTouchMove(event: Weapp.TouchEvent) {
+ const { data } = this;
+ const deltaY = event.touches[0].clientY - data.startY;
+ this.set({
+ offset: range(
+ data.startOffset + deltaY,
+ -(data.count * data.itemHeight),
+ data.itemHeight
+ )
+ });
+ },
+
+ onTouchEnd() {
+ const { data } = this;
+ if (data.offset !== data.startOffset) {
+ this.set({
+ duration: DEFAULT_DURATION
+ });
+ const index = range(
+ Math.round(-data.offset / data.itemHeight),
+ 0,
+ data.count - 1
+ );
+ this.setIndex(index, true);
+ }
+ },
+
+ onClickItem(event: Weapp.Event) {
+ const { index } = event.currentTarget.dataset;
+ this.setIndex(index, true);
+ },
+
+ adjustIndex(index: number) {
+ const { data } = this;
+ index = range(index, 0, data.count);
+ for (let i = index; i < data.count; i++) {
+ if (!this.isDisabled(data.options[i])) return i;
+ }
+ for (let i = index - 1; i >= 0; i--) {
+ if (!this.isDisabled(data.options[i])) return i;
+ }
+ },
+
+ isDisabled(option: any) {
+ return isObj(option) && option.disabled;
+ },
+
+ getOptionText(option: any) {
+ const { data } = this;
+ return isObj(option) && data.valueKey in option
+ ? option[data.valueKey]
+ : option;
+ },
+
+ setIndex(index: number, userAction: boolean) {
+ const { data } = this;
+ index = this.adjustIndex(index) || 0;
+
+ this.set({
+ offset: -index * data.itemHeight
+ });
+
+ if (index !== data.currentIndex) {
+ this.set({
+ currentIndex: index
+ });
+ userAction && this.$emit('change', index);
+ }
+ },
+
+ setValue(value: string) {
+ const { options } = this.data;
+ for (let i = 0; i < options.length; i++) {
+ if (this.getOptionText(options[i]) === value) {
+ return this.setIndex(i);
+ }
+ }
+ },
+
+ getValue() {
+ const { data } = this;
+ return data.options[data.currentIndex];
+ }
+ }
+});
diff --git a/packages/picker-column/index.wxml b/packages/picker-column/index.wxml
new file mode 100644
index 00000000..d0ecb33c
--- /dev/null
+++ b/packages/picker-column/index.wxml
@@ -0,0 +1,31 @@
+
+
+ {{ getOptionText(option, valueKey) }}
+
+
+
+
+function isObj(x) {
+ var type = typeof x;
+ return x !== null && (type === 'object' || type === 'function');
+}
+
+module.exports = function (option, valueKey) {
+ return isObj(option) && option[valueKey] ? option[valueKey] : option;
+}
+
diff --git a/packages/picker/README.md b/packages/picker/README.md
new file mode 100644
index 00000000..04c3b165
--- /dev/null
+++ b/packages/picker/README.md
@@ -0,0 +1,185 @@
+## Picker 选择器
+选择器组件通常与 [弹出层](#/popup) 组件配合使用
+
+### 使用指南
+在 app.json 或 index.json 中引入组件
+```json
+"usingComponents": {
+ "van-picker": "path/to/vant-weapp/dist/picker/index"
+}
+```
+
+### 代码演示
+
+
+#### 基础用法
+
+```html
+
+```
+
+```javascript
+import Toast from 'path/to/vant-weapp/dist/toast/toast';
+
+Page({
+ data: {
+ columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
+ },
+
+ onChange(event) {
+ const { picker, value, index } = event.detail;
+ Toast(`当前值：${value}, 当前索引：${index}`);
+ }
+});
+```
+
+#### 禁用选项
+选项可以为对象结构，通过设置 disabled 来禁用该选项
+
+```html
+
+```
+
+```javascript
+Page({
+ data: {
+ columns: [
+ { text: '杭州', disabled: true },
+ { text: '宁波' },
+ { text: '温州' }
+ ]
+ }
+});
+```
+
+#### 展示顶部栏
+
+```html
+
+```
+
+```javascript
+import Toast from 'path/to/vant-weapp/dist/toast/toast';
+
+Page({
+ data: {
+ columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
+ },
+
+ onConfirm(event) {
+ const { picker, value, index } = event.detail;
+ Toast(`当前值：${value}, 当前索引：${index}`);
+ },
+
+ onCancel() {
+ Toast('取消');
+ }
+});
+```
+
+#### 多列联动
+
+```html
+
+```
+
+```javascript
+const citys = {
+ '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+ '福建': ['福州', '厦门', '莆田', '三明', '泉州']
+};
+
+Page({
+ data: {
+ columns: [
+ {
+ values: Object.keys(citys),
+ className: 'column1'
+ },
+ {
+ values: citys['浙江'],
+ className: 'column2',
+ defaultIndex: 2
+ }
+ ]
+ },
+
+ onChange(event) {
+ const { picker, value, index } = event.detail;
+ picker.setColumnValues(1, citys[values[0]]);
+ }
+});
+```
+
+#### 加载状态
+当 Picker 数据是通过异步获取时，可以通过 `loading` 属性显示加载提示
+
+```html
+
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| columns | 对象数组，配置每一列显示的数据 | `Array` | `[]` | - |
+| show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | - |
+| title | 顶部栏标题 | `String` | `''` | - |
+| loading | 是否显示加载状态 | `Boolean` | `false` | - |
+| value-key | 选项对象中，文字对应的 key | `String` | `text` | - |
+| item-height | 选项高度 | `Number` | `44` | - |
+| confirm-button-text | 确认按钮文字 | `String` | `确认` | - |
+| cancel-button-text | 取消按钮文字 | `String` | `取消` | - |
+| visible-item-count | 可见的选项个数 | `Number` | `5` | - |
+
+### Event
+
+Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
+
+| 事件名 | 说明 | 参数 |
+|------|------|------|
+| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引 |
+| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引 |
+| change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引
多列：Picker 实例，所有列选中值，当前列对应的索引 |
+
+
+### Columns 数据结构
+
+当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`
+
+| key | 说明 |
+|------|------|
+| values | 列中对应的备选值 |
+| defaultIndex | 初始选中项的索引，默认为 0 |
+
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+| active-class | 选中项样式类 |
+| toolbar-class | 顶部栏样式类 |
+| column-class | 列样式类 |
+
+### 方法
+
+通过 selectComponent 可以获取到 picker 实例并调用实例方法
+
+| 方法名 | 参数 | 返回值 | 介绍 |
+|------|------|------|------|
+| getValues | - | values | 获取所有列选中的值 |
+| setValues | values | - | 设置所有列选中的值 |
+| getIndexes | - | indexes | 获取所有列选中值对应的索引 |
+| setIndexes | indexes | - | 设置所有列选中值对应的索引 |
+| getColumnValue | columnIndex | value | 获取对应列选中的值 |
+| setColumnValue | columnIndex, value | - | 设置对应列选中的值 |
+| getColumnIndex | columnIndex | optionIndex | 获取对应列选中项的索引 |
+| setColumnIndex | columnIndex, optionIndex | - | 设置对应列选中项的索引 |
+| getColumnValues | columnIndex | values | 获取对应列中所有选项 |
+| setColumnValues | columnIndex, values | - | 设置对应列中所有选项 |
diff --git a/packages/picker/index.json b/packages/picker/index.json
new file mode 100644
index 00000000..2fcec899
--- /dev/null
+++ b/packages/picker/index.json
@@ -0,0 +1,7 @@
+{
+ "component": true,
+ "usingComponents": {
+ "picker-column": "../picker-column/index",
+ "loading": "../loading/index"
+ }
+}
diff --git a/packages/picker/index.less b/packages/picker/index.less
new file mode 100644
index 00000000..f134472b
--- /dev/null
+++ b/packages/picker/index.less
@@ -0,0 +1,67 @@
+@import '../common/style/var';
+
+.van-picker {
+ position: relative;
+ overflow: hidden;
+ -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
+ background-color: @white;
+ user-select: none;
+
+ &__toolbar {
+ display: flex;
+ height: 44px;
+ line-height: 44px;
+ justify-content: space-between;
+ }
+
+ &__cancel,
+ &__confirm {
+ padding: 0 15px;
+ font-size: 14px;
+ color: @blue;
+
+ &:active {
+ background-color: @active-color;
+ }
+ }
+
+ &__title {
+ max-width: 50%;
+ font-size: 16px;
+ font-weight: 500;
+ text-align: center;
+ }
+
+ &__columns {
+ position: relative;
+ display: flex;
+ }
+
+ &__column {
+ flex: 1;
+ }
+
+ &__loading {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 4;
+ display: flex;
+ background-color: rgba(255, 255, 255, 0.9);
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__loading .van-loading,
+ &__frame {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ z-index: 1;
+ width: 100%;
+ pointer-events: none;
+ transform: translateY(-50%);
+ }
+}
diff --git a/packages/picker/index.ts b/packages/picker/index.ts
new file mode 100644
index 00000000..115fe3f9
--- /dev/null
+++ b/packages/picker/index.ts
@@ -0,0 +1,154 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+ classes: ['active-class', 'toolbar-class', 'column-class'],
+
+ props: {
+ title: String,
+ loading: Boolean,
+ showToolbar: Boolean,
+ confirmButtonText: String,
+ cancelButtonText: String,
+ visibleItemCount: {
+ type: Number,
+ value: 5
+ },
+ valueKey: {
+ type: String,
+ value: 'text'
+ },
+ itemHeight: {
+ type: Number,
+ value: 44
+ },
+ columns: {
+ type: Array,
+ value: [],
+ observer(columns = []) {
+ this.set({
+ simple: columns.length && !columns[0].values
+ }, () => {
+ const children = this.children = this.selectAllComponents('.van-picker__column');
+
+ if (Array.isArray(children) && children.length) {
+ this.setColumns();
+ }
+ });
+ }
+ }
+ },
+
+ methods: {
+ noop() {},
+
+ setColumns() {
+ const { data } = this;
+ const columns = data.simple ? [{ values: data.columns }] : data.columns;
+ columns.forEach((columns, index: number) => {
+ this.setColumnValues(index, columns.values);
+ });
+ },
+
+ emit(event: Weapp.Event) {
+ const { type } = event.currentTarget.dataset;
+ if (this.data.simple) {
+ this.$emit(type, {
+ value: this.getColumnValue(0),
+ index: this.getColumnIndex(0)
+ });
+ } else {
+ this.$emit(type, {
+ value: this.getValues(),
+ index: this.getIndexes()
+ });
+ }
+ },
+
+ onChange(event: Weapp.Event) {
+ if (this.data.simple) {
+ this.$emit('change', {
+ picker: this,
+ value: this.getColumnValue(0),
+ index: this.getColumnIndex(0)
+ });
+ } else {
+ this.$emit('change', {
+ picker: this,
+ value: this.getValues(),
+ index: event.currentTarget.dataset.index
+ });
+ }
+ },
+
+ // get column instance by index
+ getColumn(index: number) {
+ return this.children[index];
+ },
+
+ // get column value by index
+ getColumnValue(index: number) {
+ const column = this.getColumn(index);
+ return column && column.getValue();
+ },
+
+ // set column value by index
+ setColumnValue(index: number, value: any) {
+ const column = this.getColumn(index);
+ column && column.setValue(value);
+ },
+
+ // get column option index by column index
+ getColumnIndex(columnIndex: number) {
+ return (this.getColumn(columnIndex) || {}).data.currentIndex;
+ },
+
+ // set column option index by column index
+ setColumnIndex(columnIndex: number, optionIndex: number) {
+ const column = this.getColumn(columnIndex);
+ column && column.setIndex(optionIndex);
+ },
+
+ // get options of column by index
+ getColumnValues(index: number) {
+ return (this.children[index] || {}).data.options;
+ },
+
+ // set options of column by index
+ setColumnValues(index: number, options: any[]) {
+ const column = this.children[index];
+
+ if (
+ column &&
+ JSON.stringify(column.data.options) !== JSON.stringify(options)
+ ) {
+ column.set({ options }, () => {
+ column.setIndex(0);
+ });
+ }
+ },
+
+ // get values of all columns
+ getValues() {
+ return this.children.map((child: Weapp.Component) => child.getValue());
+ },
+
+ // set values of all columns
+ setValues(values: []) {
+ values.forEach((value, index) => {
+ this.setColumnValue(index, value);
+ });
+ },
+
+ // get indexes of all columns
+ getIndexes() {
+ return this.children.map((child: Weapp.Component) => child.data.currentIndex);
+ },
+
+ // set indexes of all columns
+ setIndexes(indexes: number[]) {
+ indexes.forEach((optionIndex, columnIndex) => {
+ this.setColumnIndex(columnIndex, optionIndex);
+ });
+ }
+ }
+});
diff --git a/packages/picker/index.wxml b/packages/picker/index.wxml
new file mode 100644
index 00000000..fa778f3c
--- /dev/null
+++ b/packages/picker/index.wxml
@@ -0,0 +1,41 @@
+
+
+
+ {{ cancelButtonText || '取消' }}
+
+ {{ title }}
+
+ {{ confirmButtonText || '确认' }}
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/popup/index.ts b/packages/popup/index.ts
index d100fe0b..8688a149 100644
--- a/packages/popup/index.ts
+++ b/packages/popup/index.ts
@@ -1,8 +1,9 @@
import { VantComponent } from '../common/component';
import { transition } from '../mixins/transition';
+import { iphonex } from '../mixins/iphonex';
VantComponent({
- mixins: [transition(false)],
+ mixins: [transition(false), iphonex],
props: {
transition: String,
@@ -23,20 +24,6 @@ VantComponent({
position: {
type: String,
value: 'center'
- },
- safeAreaInsetBottom: {
- type: Boolean,
- value: true
- }
- },
-
- computed: {
- popupClass() {
- const { position, safeAreaInsetBottom, isIPhoneX } = this.data;
- return this.classNames('custom-class', 'van-popup', {
- [`van-popup--${position}`]: position,
- [`van-popup--safe`]: isIPhoneX && safeAreaInsetBottom && position === 'bottom'
- });
}
},
diff --git a/packages/popup/index.wxml b/packages/popup/index.wxml
index 07bd1ae1..bafbfecb 100644
--- a/packages/popup/index.wxml
+++ b/packages/popup/index.wxml
@@ -1,3 +1,5 @@
+
+