fix(Calendar): should only scroll calendar body when inited (#6926)

This commit is contained in:
neverland 2020-08-02 16:49:57 +08:00 committed by GitHub
parent 81de225e69
commit 39c6637894
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 30 deletions

View File

@ -1,4 +1,5 @@
import { createNamespace } from '../../utils'; import { createNamespace } from '../../utils';
import { setScrollTop } from '../../utils/dom/scroll';
import { import {
t, t,
bem, bem,
@ -107,12 +108,16 @@ export default createComponent({
return this.height; return this.height;
}, },
scrollIntoView() { scrollIntoView(body) {
if (this.showSubtitle) { const { days, month } = this.$refs;
this.$refs.days.scrollIntoView(); const el = this.showSubtitle ? days : month;
} else {
this.$refs.month.scrollIntoView(); const scrollTop =
} el.getBoundingClientRect().top -
body.getBoundingClientRect().top +
body.scrollTop;
setScrollTop(body, scrollTop);
}, },
getMultipleDayType(day) { getMultipleDayType(day) {

View File

@ -208,7 +208,8 @@ export default createComponent({
this.months.some((month, index) => { this.months.some((month, index) => {
if (compareMonth(month, targetDate) === 0) { if (compareMonth(month, targetDate) === 0) {
this.$refs.months[index].scrollIntoView(); const { body, months } = this.$refs;
months[index].scrollIntoView(body);
return true; return true;
} }

View File

@ -457,28 +457,6 @@ test('color prop when type is range', async () => {
expect(wrapper).toMatchSnapshot(); 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', () => { test('close event', () => {
const wrapper = mount(Calendar, { const wrapper = mount(Calendar, {
propsData: { propsData: {

View File

@ -197,6 +197,7 @@ test('first day of week', async () => {
propsData: { propsData: {
poppable: false, poppable: false,
defaultDate: new Date(2020, 7, 1), defaultDate: new Date(2020, 7, 1),
minDate: new Date(2020, 7, 1),
maxDate: new Date(2020, 7, 30), maxDate: new Date(2020, 7, 30),
firstDayOfWeek: 2, firstDayOfWeek: 2,
}, },
@ -210,5 +211,5 @@ test('first day of week', async () => {
'.van-calendar__month:first-of-type .van-calendar__day' '.van-calendar__month:first-of-type .van-calendar__day'
); );
expect(day.text()).toEqual('1'); expect(day.text()).toEqual('1');
expect(day.attributes('style')).toContain(`margin-left: ${100 / 7}%`); expect(day.attributes('style')).toContain(`margin-left: ${(100 * 4) / 7}%`);
}); });