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` diff --git a/src/calendar/components/Day.js b/src/calendar/components/Day.js index 73a8d4b3c..f27091037 100644 --- a/src/calendar/components/Day.js +++ b/src/calendar/components/Day.js @@ -22,6 +22,11 @@ export default createComponent({ height: rowHeight, }; + if (item.type === 'placeholder') { + style.width = '100%'; + return style; + } + if (index === 0) { style.marginLeft = `${(100 * offset) / 7}%`; } diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js index e52985392..b412aebd0 100644 --- a/src/calendar/components/Month.js +++ b/src/calendar/components/Month.js @@ -1,7 +1,7 @@ -import { ref, computed, watch, nextTick } from 'vue'; +import { ref, computed } from 'vue'; // Utils -import { addUnit, unitToPx, setScrollTop, createNamespace } from '../../utils'; +import { addUnit, setScrollTop, createNamespace } from '../../utils'; import { getMonthEndDay } from '../../datetime-picker/utils'; import { t, @@ -13,8 +13,7 @@ import { } from '../utils'; // Composition -import { useRect, useToggle } from '@vant/use'; -import { useRefs } from '../../composition/use-refs'; +import { useToggle } from '@vant/use'; import { useExpose } from '../../composition/use-expose'; import { useHeight } from '../../composition/use-height'; @@ -37,7 +36,6 @@ export default createComponent({ currentDate: [Date, Array], allowSameDay: Boolean, showSubtitle: Boolean, - realRowHeight: Number, showMonthTitle: Boolean, firstDayOfWeek: Number, }, @@ -46,15 +44,12 @@ export default createComponent({ setup(props, { emit }) { const [visible, setVisible] = useToggle(); - const [dayRefs, setDayRefs] = useRefs(); const daysRef = ref(); const monthRef = ref(); const height = useHeight(monthRef); const title = computed(() => formatMonthTitle(props.date)); - const rowHeight = computed(() => addUnit(props.rowHeight)); - const offset = computed(() => { const realDay = props.date.getDay(); @@ -70,18 +65,7 @@ export default createComponent({ const shouldRender = computed(() => visible.value || !props.lazyRender); - const monthStyle = computed(() => { - if (!shouldRender.value) { - const rowCount = Math.ceil((totalDay.value + offset.value) / 7); - const padding = rowCount * unitToPx(props.realRowHeight); - return { - paddingBottom: `${padding}px`, - }; - } - }); - const getDate = () => props.data; - const getTitle = () => title.value; const scrollIntoView = (body) => { @@ -190,11 +174,20 @@ export default createComponent({ }; const renderMark = () => { - if (props.showMark) { + if (props.showMark && shouldRender.value) { return
{props.date.getMonth() + 1}
; } }; + const placeholders = computed(() => { + const rows = []; + const count = Math.ceil((totalDay.value + offset.value) / 7); + for (let day = 1; day <= count; day++) { + rows.push({ type: 'placeholder' }); + } + return rows; + }); + const days = computed(() => { const days = []; const year = props.date.getFullYear(); @@ -223,7 +216,6 @@ export default createComponent({ const renderDay = (item, index) => ( { - if (shouldRender.value) { - return ( -
- {renderMark()} - {days.value.map(renderDay)} -
- ); - } - - return
; + return ( +
+ {renderMark()} + {(shouldRender.value ? days : placeholders).value.map(renderDay)} +
+ ); }; - watch( - () => props.realRowHeight, - () => { - nextTick(() => { - height.value = useRect(monthRef).height; - }); - } - ); - - watch(shouldRender, (value) => { - if (value) { - nextTick(() => { - if (dayRefs.value[0] && !props.realRowHeight) { - const { height } = dayRefs.value[0].$el.getBoundingClientRect(); - emit('update-height', height); - } - }); - } - }); - useExpose({ getDate, getTitle, @@ -277,7 +245,7 @@ export default createComponent({ }); return () => ( -
+
{renderTitle()} {renderDays()}
diff --git a/src/calendar/index.js b/src/calendar/index.js index 2094f8315..41548904c 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -174,7 +174,6 @@ export default createComponent({ const state = reactive({ subtitle: '', currentDate: getInitialDate(), - realRowHeight: 0, }); const [monthRefs, setMonthRefs] = useRefs(); @@ -244,7 +243,8 @@ export default createComponent({ visibleRange[0] = i; } - if (!month.visible) { + if (!monthRefs.value[i].showed) { + monthRefs.value[i].showed = true; emit('month-show', { date: month.date, title: month.title, @@ -426,10 +426,6 @@ export default createComponent({ emit('update:show', val); }; - const onUpdateHeight = (height) => { - state.realRowHeight = height; - }; - const renderMonth = (date, index) => { const showMonthTitle = index !== 0 || !props.showSubtitle; return ( @@ -437,7 +433,6 @@ export default createComponent({ ref={setMonthRefs(index)} date={date} currentDate={state.currentDate} - realRowHeight={state.realRowHeight} showMonthTitle={showMonthTitle} firstDayOfWeek={dayOffset.value} {...pick(props, [ @@ -453,7 +448,6 @@ export default createComponent({ 'allowSameDay', ])} onClick={onClickDay} - onUpdate-height={onUpdateHeight} /> ); }; diff --git a/src/calendar/test/__snapshots__/index.legacy.js.snap b/src/calendar/test/__snapshots__/index.legacy.js.snap index b27a7f541..a45e76732 100644 --- a/src/calendar/test/__snapshots__/index.legacy.js.snap +++ b/src/calendar/test/__snapshots__/index.legacy.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