Merge branch '2.x' into dev

2025-04-06 03:57:59 +08:00 · 2020-11-15 21:04:24 +08:00 · 2020-11-15 21:04:24 +08:00 · 9aec2bcae7
commit 9aec2bcae7
parent e22d4d3c44 a76625483c
6 changed files with 101 additions and 92 deletions
--- 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`
--- 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`
--- 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}%`;
      }
--- 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 <div class={bem('month-mark')}>{props.date.getMonth() + 1}</div>;
      }
    };

+    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) => (
      <Day
-        ref={setDayRefs(index)}
        item={item}
        index={index}
        color={props.color}
@ -236,38 +228,14 @@ export default createComponent({
    );

    const renderDays = () => {
-      if (shouldRender.value) {
-        return (
-          <div ref={daysRef} role="grid" class={bem('days')}>
-            {renderMark()}
-            {days.value.map(renderDay)}
-          </div>
-        );
-      }
-
-      return <div ref={daysRef} />;
+      return (
+        <div ref={daysRef} role="grid" class={bem('days')}>
+          {renderMark()}
+          {(shouldRender.value ? days : placeholders).value.map(renderDay)}
+        </div>
+      );
    };

-    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 () => (
-      <div class={bem('month')} ref={monthRef} style={monthStyle.value}>
+      <div class={bem('month')} ref={monthRef}>
        {renderTitle()}
        {renderDays()}
      </div>
--- 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}
        />
      );
    };
--- 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`] = `
    <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
  </div>
  <div class="van-calendar__body">
-    <div class="van-calendar__month" style="padding-bottom: 0px;">
+    <div class="van-calendar__month">
      <div role="grid" class="van-calendar__days">
-        <div class="van-calendar__month-mark">1</div>
+        <div class="van-calendar__month-mark" style="">1</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">2</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">5</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
@ -61,14 +61,14 @@ exports[`color prop when type is single 1`] = `
    <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
  </div>
  <div class="van-calendar__body">
-    <div class="van-calendar__month" style="padding-bottom: 0px;">
+    <div class="van-calendar__month">
      <div role="grid" class="van-calendar__days">
-        <div class="van-calendar__month-mark">1</div>
+        <div class="van-calendar__month-mark" style="">1</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">2</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">5</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
@ -114,14 +114,14 @@ exports[`formatter prop 1`] = `
    <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
  </div>
  <div class="van-calendar__body">
-    <div class="van-calendar__month" style="padding-bottom: 0px;">
+    <div class="van-calendar__month">
      <div role="grid" class="van-calendar__days">
-        <div class="van-calendar__month-mark">1</div>
+        <div class="van-calendar__month-mark" style="">1</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">2</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">5</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
@ -173,14 +173,14 @@ exports[`popup wrapper 2`] = `
      <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
    </div>
    <div class="van-calendar__body">
-      <div class="van-calendar__month" style="padding-bottom: 0px;">
+      <div class="van-calendar__month">
        <div role="grid" class="van-calendar__days">
-          <div class="van-calendar__month-mark">1</div>
+          <div class="van-calendar__month-mark" style="">1</div>
          <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
-          <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
-          <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
-          <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
-          <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
+          <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">2</div>
+          <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
+          <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
+          <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">5</div>
          <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
          <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
          <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
@ -228,9 +228,9 @@ exports[`row-height prop 1`] = `
    <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
  </div>
  <div class="van-calendar__body">
-    <div class="van-calendar__month" style="padding-bottom: 0px;">
+    <div class="van-calendar__month">
      <div role="grid" class="van-calendar__days">
-        <div class="van-calendar__month-mark">1</div>
+        <div class="van-calendar__month-mark" style="">1</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px; margin-left: 71.42857142857143%;">1</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">2</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">3</div>
@ -281,14 +281,14 @@ exports[`title & footer slot 1`] = `
    <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
  </div>
  <div class="van-calendar__body">
-    <div class="van-calendar__month" style="padding-bottom: 0px;">
+    <div class="van-calendar__month">
      <div role="grid" class="van-calendar__days">
-        <div class="van-calendar__month-mark">1</div>
+        <div class="van-calendar__month-mark" style="">1</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
-        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">2</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">5</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>