From 0bd1128b91ec6f9f22b2cf5d6bbc54f079478e31 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 15 Nov 2020 17:26:46 +0800 Subject: [PATCH 1/4] fix(Calendar): should not render all months on mounted (#7564) --- src/calendar/components/Month.js | 62 ++++++------------ src/calendar/index.js | 7 -- .../test/__snapshots__/demo.spec.js.snap | 30 ++++----- .../test/__snapshots__/index.spec.js.snap | 64 +++++++++---------- 4 files changed, 67 insertions(+), 96 deletions(-) diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js index 9a6508a00..d1d8cc45e 100644 --- a/src/calendar/components/Month.js +++ b/src/calendar/components/Month.js @@ -26,7 +26,6 @@ export default createComponent({ currentDate: [Date, Array], allowSameDay: Boolean, showSubtitle: Boolean, - realRowHeight: Number, showMonthTitle: Boolean, firstDayOfWeek: Number, }, @@ -66,15 +65,13 @@ export default createComponent({ return this.visible || !this.lazyRender; }, - monthStyle() { - if (!this.shouldRender) { - const padding = - Math.ceil((this.totalDay + this.offset) / 7) * this.realRowHeight; - - return { - paddingBottom: `${padding}px`, - }; + placeholders() { + const rows = []; + const count = Math.ceil((this.totalDay + this.offset) / 7); + for (let day = 1; day <= count; day++) { + rows.push({ type: 'placeholder' }); } + return rows; }, days() { @@ -104,23 +101,6 @@ export default createComponent({ }, }, - watch: { - shouldRender(value) { - if (value) { - this.$nextTick(() => { - if (this.$refs.day[0] && !this.realRowHeight) { - const { height } = this.$refs.day[0].getBoundingClientRect(); - this.$emit('update-height', height); - } - }); - } - }, - - realRowHeight() { - this.height = null; - }, - }, - methods: { getHeight() { if (!this.height) { @@ -238,6 +218,11 @@ export default createComponent({ height: this.rowHeightWithUnit, }; + if (type === 'placeholder') { + style.width = '100%'; + return style; + } + if (index === 0) { style.marginLeft = `${(100 * this.offset) / 7}%`; } @@ -266,22 +251,19 @@ export default createComponent({ }, genMark() { - if (this.showMark) { + if (this.showMark && this.shouldRender) { return
{this.date.getMonth() + 1}
; } }, genDays() { - if (this.shouldRender) { - return ( -
- {this.genMark()} - {this.days.map(this.genDay)} -
- ); - } - - return
; + const days = this.shouldRender ? this.days : this.placeholders; + return ( +
+ {this.genMark()} + {days.map(this.genDay)} +
+ ); }, genDay(item, index) { @@ -304,8 +286,6 @@ export default createComponent({ if (type === 'selected') { return (
+
{this.genTitle()} {this.genDays()}
diff --git a/src/calendar/index.js b/src/calendar/index.js index 6f6b7052d..36d16898d 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -112,7 +112,6 @@ export default createComponent({ return { subtitle: '', currentDate: this.getInitialDate(), - realRowHeight: 0, }; }, @@ -404,10 +403,6 @@ export default createComponent({ this.$emit('confirm', copyDates(this.currentDate)); }, - onUpdateHeight(height) { - this.realRowHeight = height; - }, - genMonth(date, index) { const showMonthTitle = index !== 0 || !this.showSubtitle; return ( @@ -426,11 +421,9 @@ export default createComponent({ currentDate={this.currentDate} showSubtitle={this.showSubtitle} allowSameDay={this.allowSameDay} - realRowHeight={this.realRowHeight} showMonthTitle={showMonthTitle} firstDayOfWeek={this.dayOffset} onClick={this.onClickDay} - onUpdate-height={this.onUpdateHeight} /> ); }, diff --git a/src/calendar/test/__snapshots__/demo.spec.js.snap b/src/calendar/test/__snapshots__/demo.spec.js.snap index b0a56dda3..6ac56d057 100644 --- a/src/calendar/test/__snapshots__/demo.spec.js.snap +++ b/src/calendar/test/__snapshots__/demo.spec.js.snap @@ -64,13 +64,13 @@ exports[`renders demo correctly 1`] = `
日一二三四五六
-
+
-
1
+
1
1
-
2
-
3
-
4
+
2
+
3
+
4
5
6
7
@@ -102,14 +102,14 @@ exports[`renders demo correctly 1`] = `
31
-
+
2012年2月
-
2
+
2
1
-
2
-
3
-
4
+
2
+
3
+
4
5
6
7
@@ -137,14 +137,14 @@ exports[`renders demo correctly 1`] = `
29
-
+
2012年3月
-
3
+
3
1
-
2
-
3
-
4
+
2
+
3
+
4
5
6
7
diff --git a/src/calendar/test/__snapshots__/index.spec.js.snap b/src/calendar/test/__snapshots__/index.spec.js.snap index b27a7f541..a45e76732 100644 --- a/src/calendar/test/__snapshots__/index.spec.js.snap +++ b/src/calendar/test/__snapshots__/index.spec.js.snap @@ -8,14 +8,14 @@ exports[`color prop when type is range 1`] = `
日一二三四五六
-
+
-
1
+
1
1
-
2
-
3
-
4
-
5
+
2
+
3
+
4
+
5
6
7
8
@@ -61,14 +61,14 @@ exports[`color prop when type is single 1`] = `
日一二三四五六
-
+
-
1
+
1
1
-
2
-
3
-
4
-
5
+
2
+
3
+
4
+
5
6
7
8
@@ -114,14 +114,14 @@ exports[`formatter prop 1`] = `
日一二三四五六
-
+
-
1
+
1
1
-
2
-
3
-
4
-
5
+
2
+
3
+
4
+
5
6
7
8
@@ -173,14 +173,14 @@ exports[`popup wrapper 2`] = `
日一二三四五六
-
+
-
1
+
1
1
-
2
-
3
-
4
-
5
+
2
+
3
+
4
+
5
6
7
8
@@ -228,9 +228,9 @@ exports[`row-height prop 1`] = `
日一二三四五六
-
+
-
1
+
1
1
2
3
@@ -281,14 +281,14 @@ exports[`title & footer slot 1`] = `
日一二三四五六
-
+
-
1
+
1
1
-
2
-
3
-
4
-
5
+
2
+
3
+
4
+
5
6
7
8
From b382e18d3096aaec6602ffcdaf50c5e54e480ea5 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 15 Nov 2020 20:46:56 +0800 Subject: [PATCH 2/4] fix(Calendar): month-show event triggered multiple times (#7565) --- src/calendar/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/calendar/index.js b/src/calendar/index.js index 36d16898d..f22ca018e 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -278,7 +278,8 @@ export default createComponent({ visibleRange[0] = i; } - if (!months[i].visible) { + if (!months[i].showed) { + months[i].showed = true; this.$emit('month-show', { date: months[i].date, title: months[i].title, From 5e87c3e1aa98f70be926765ec034b7935651dda6 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 15 Nov 2020 20:48:38 +0800 Subject: [PATCH 3/4] chore: release 2.10.14 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e942113aa..35ad5970b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vant", - "version": "2.10.13", + "version": "2.10.14", "description": "Mobile UI Components built on Vue", "main": "lib/index.js", "module": "es/index.js", From a76625483c8e37304dd9cadf3cd488fa559b4d2e Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 15 Nov 2020 20:52:09 +0800 Subject: [PATCH 4/4] docs(changelog): 2.10.14 --- docs/markdown/changelog.en-US.md | 21 +++++++++++++++++++++ docs/markdown/changelog.zh-CN.md | 21 +++++++++++++++++++++ 2 files changed, 42 insertions(+) diff --git a/docs/markdown/changelog.en-US.md b/docs/markdown/changelog.en-US.md index 1b913832b..669029674 100644 --- a/docs/markdown/changelog.en-US.md +++ b/docs/markdown/changelog.en-US.md @@ -10,6 +10,27 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/). - Minor version：released every one to two months, including backwards compatible features. - Major version：including breaking changes and new features. +### [v2.10.14](https://github.com/youzan/vant/compare/v2.10.13...v2.10.14) + +`2020-11-15` + +**Feature** + +- ImagePreview: passing current index to index slot [#7552](https://github.com/youzan/vant/issues/7552) +- Popup: add transition-appear prop [#7525](https://github.com/youzan/vant/issues/7525) +- Skeleton: add @skeleton-avatar-size less var [#7556](https://github.com/youzan/vant/issues/7556) +- Skeleton: add @skeleton-title-width less var [#7557](https://github.com/youzan/vant/issues/7557) + +**Bug Fixes** + +- Calendar: month-show event triggered multiple times [#7565](https://github.com/youzan/vant/issues/7565) +- Calendar: should not render all months on mounted [#7564](https://github.com/youzan/vant/issues/7564) +- IndexBar: incorrect behavior inside popup [#7559](https://github.com/youzan/vant/issues/7559) +- NavBar: safe-area-inset-top css incorrect [#7534](https://github.com/youzan/vant/issues/7534) +- Skeleton: avatar-size can be number type [#7555](https://github.com/youzan/vant/issues/7555) +- Sticky: not work in some cases [#7561](https://github.com/youzan/vant/issues/7561) +- Swipe: leak when width has decimal [#7562](https://github.com/youzan/vant/issues/7562) + ### [v2.10.13](https://github.com/youzan/vant/compare/v2.10.12...v2.10.13) `2020-11-08` diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index 19c770028..dd8b9da8d 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/docs/markdown/changelog.zh-CN.md @@ -10,6 +10,27 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 - 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。 - 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。 +### [v2.10.14](https://github.com/youzan/vant/compare/v2.10.13...v2.10.14) + +`2020-11-15` + +**Feature** + +- ImagePreview: index 插槽新增 index 参数 [#7552](https://github.com/youzan/vant/issues/7552) +- Popup: 新增 transition-appear 属性 [#7525](https://github.com/youzan/vant/issues/7525) +- Skeleton: 新增 @skeleton-avatar-size less 变量 [#7556](https://github.com/youzan/vant/issues/7556) +- Skeleton: 新增 @skeleton-title-width less 变量 [#7557](https://github.com/youzan/vant/issues/7557) + +**Bug Fixes** + +- Calendar: 修复 month-show 事件触发时机不正确的问题 [#7565](https://github.com/youzan/vant/issues/7565) +- Calendar: 修复初始化时 lazy-render 不生效的问题 [#7564](https://github.com/youzan/vant/issues/7564) +- IndexBar: 修复在 Popup 内使用时锚点无法吸顶的问题 [#7559](https://github.com/youzan/vant/issues/7559) +- NavBar: 修复 safe-area-inset-top 属性未能正确生效的问题 [#7534](https://github.com/youzan/vant/issues/7534) +- Skeleton: 修复 avatar-size 属性传入 number 类型时报错的问题 [#7555](https://github.com/youzan/vant/issues/7555) +- Sticky: 修复某些情况下无法正确吸顶的问题 [#7561](https://github.com/youzan/vant/issues/7561) +- Swipe: 修复宽度为小数时漏边的问题 [#7562](https://github.com/youzan/vant/issues/7562) + ### [v2.10.13](https://github.com/youzan/vant/compare/v2.10.12...v2.10.13) `2020-11-08`