diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js index ef58563c8..a04dfda3e 100644 --- a/src/calendar/components/Month.js +++ b/src/calendar/components/Month.js @@ -1,4 +1,5 @@ import { createNamespace } from '../../utils'; +import { setScrollTop } from '../../utils/dom/scroll'; import { t, bem, @@ -107,12 +108,16 @@ export default createComponent({ return this.height; }, - scrollIntoView() { - if (this.showSubtitle) { - this.$refs.days.scrollIntoView(); - } else { - this.$refs.month.scrollIntoView(); - } + scrollIntoView(body) { + const { days, month } = this.$refs; + const el = this.showSubtitle ? days : month; + + const scrollTop = + el.getBoundingClientRect().top - + body.getBoundingClientRect().top + + body.scrollTop; + + setScrollTop(body, scrollTop); }, getMultipleDayType(day) { diff --git a/src/calendar/index.js b/src/calendar/index.js index e45415c84..7f88475c5 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -208,7 +208,8 @@ export default createComponent({ this.months.some((month, index) => { if (compareMonth(month, targetDate) === 0) { - this.$refs.months[index].scrollIntoView(); + const { body, months } = this.$refs; + months[index].scrollIntoView(body); return true; } diff --git a/src/calendar/test/index.spec.js b/src/calendar/test/index.spec.js index 45d680e46..4fabe9d06 100644 --- a/src/calendar/test/index.spec.js +++ b/src/calendar/test/index.spec.js @@ -457,28 +457,6 @@ test('color prop when type is range', async () => { expect(wrapper).toMatchSnapshot(); }); -test('should scroll to current month when show', async (done) => { - const wrapper = mount(Calendar, { - propsData: { - type: 'range', - minDate: new Date(2010, 0, 10), - maxDate: new Date(2010, 11, 10), - defaultDate: [new Date(2010, 3, 1), new Date(2010, 5, 1)], - }, - }); - - Element.prototype.scrollIntoView = function () { - expect(this.parentNode).toEqual( - wrapper.findAll('.van-calendar__month').at(3).element - ); - done(); - }; - - wrapper.setProps({ value: true }); - - await later(); -}); - test('close event', () => { const wrapper = mount(Calendar, { propsData: { diff --git a/src/calendar/test/prop.spec.js b/src/calendar/test/prop.spec.js index 3a8a8e183..767609dec 100644 --- a/src/calendar/test/prop.spec.js +++ b/src/calendar/test/prop.spec.js @@ -197,6 +197,7 @@ test('first day of week', async () => { propsData: { poppable: false, defaultDate: new Date(2020, 7, 1), + minDate: new Date(2020, 7, 1), maxDate: new Date(2020, 7, 30), firstDayOfWeek: 2, }, @@ -210,5 +211,5 @@ test('first day of week', async () => { '.van-calendar__month:first-of-type .van-calendar__day' ); expect(day.text()).toEqual('1'); - expect(day.attributes('style')).toContain(`margin-left: ${100 / 7}%`); + expect(day.attributes('style')).toContain(`margin-left: ${(100 * 4) / 7}%`); });