alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge branch '2.x' into dev

Browse Source
This commit is contained in:
chenjiahan
2020-11-15 21:04:24 +08:00
parent e22d4d3c44 a76625483c
commit 9aec2bcae7
6 changed files with 101 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/calendar/components/Day.js
+5
View File
@@ -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}%`;
}
src/calendar/components/Month.js
+20 -52
View File
@@ -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>
src/calendar/index.js
+2 -8
View File
@@ -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}
/>
);
};
src/calendar/test/__snapshots__/index.legacy.js.snap
+32 -32
View File
@@ -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>