|
|
@@ -1,120 +1,49 @@
|
|
|
<template>
|
|
|
- <view class="nut-calendar" :class="{ 'nut-calendar-tile': !poppable }">
|
|
|
- <!-- header -->
|
|
|
- <view
|
|
|
- class="nut-calendar-header"
|
|
|
- :class="{ 'nut-calendar-header-tile': !poppable }"
|
|
|
+ <nut-popup
|
|
|
+ v-model:show="state.childIsVisible"
|
|
|
+ position="bottom"
|
|
|
+ round
|
|
|
+ @click="closeActionSheet"
|
|
|
+ v-if="poppable"
|
|
|
+ >
|
|
|
+ <nut-calendar-item
|
|
|
+ props
|
|
|
+ ref="mychild"
|
|
|
+ :type="type"
|
|
|
+ :is-auto-back-fill="isAutoBackFill"
|
|
|
+ :poppable="poppable"
|
|
|
+ :title="title"
|
|
|
+ :default-value="defaultValue"
|
|
|
+ :start-date="startDate"
|
|
|
+ :end-date="endDate"
|
|
|
+ @update="update"
|
|
|
+ @close="close"
|
|
|
+ @choose="choose"
|
|
|
>
|
|
|
- <template v-if="poppable">
|
|
|
- <view class="calendar-title">{{ title }}</view>
|
|
|
- <view class="calendar-curr-month">2020年11月</view>
|
|
|
- </template>
|
|
|
- <view class="calendar-weeks">
|
|
|
- <view
|
|
|
- class="calendar-week-item"
|
|
|
- v-for="(item, index) of weeks"
|
|
|
- :key="index"
|
|
|
- >{{ item }}</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- content-->
|
|
|
- <view
|
|
|
- class="nut-calendar-content"
|
|
|
- ref="months"
|
|
|
- @touchstart.stop="touchStart"
|
|
|
- @touchmove.stop.prevent="touchMove"
|
|
|
- @touchend.stop="touchEnd"
|
|
|
- >
|
|
|
- <view class="calendar-months-panel" ref="monthsPanel">
|
|
|
- <view class="calendar-loading-tip">{{
|
|
|
- !unLoadPrev ? '加载上一个月' : '没有更早月份'
|
|
|
- }}</view>
|
|
|
- <view
|
|
|
- class="calendar-month"
|
|
|
- v-for="(month, index) of monthsData"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <view class="calendar-month-title">{{ month.title }}</view>
|
|
|
- <view class="calendar-month-con">
|
|
|
- <view
|
|
|
- class="calendar-month-item"
|
|
|
- :class="type === 'range' ? 'month-item-range' : ''"
|
|
|
- >
|
|
|
- <template v-for="(day, i) of month.monthData" :key="i">
|
|
|
- <view
|
|
|
- class="calendar-month-day"
|
|
|
- :class="getClass(day, month)"
|
|
|
- @click="chooseDay(day, month)"
|
|
|
- >
|
|
|
- <view class="calendar-day">{{
|
|
|
- day.type == 'curr' ? day.day : ''
|
|
|
- }}</view>
|
|
|
- <view class="curr-tips" v-if="isCurrDay(month, day.day)"
|
|
|
- >今天</view
|
|
|
- >
|
|
|
- <view
|
|
|
- class="calendar-day-tip"
|
|
|
- v-if="isStartTip(day, month)"
|
|
|
- >{{ '开始' }}</view
|
|
|
- >
|
|
|
- <view
|
|
|
- class="calendar-day-tip"
|
|
|
- v-else-if="isEndTip(day, month)"
|
|
|
- >{{ '结束' }}</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- footer-->
|
|
|
- <view class="nut-calendar-footer" v-if="poppable">
|
|
|
- <view class="calendar-confirm-btn" @click="confirm">确定</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </nut-calendar-item>
|
|
|
+ </nut-popup>
|
|
|
+ <nut-calendar-item
|
|
|
+ v-else
|
|
|
+ :type="type"
|
|
|
+ :is-auto-back-fill="isAutoBackFill"
|
|
|
+ :poppable="poppable"
|
|
|
+ :title="title"
|
|
|
+ :default-value="defaultValue"
|
|
|
+ :start-date="startDate"
|
|
|
+ :end-date="endDate"
|
|
|
+ @close="close"
|
|
|
+ @choose="choose"
|
|
|
+ >
|
|
|
+ </nut-calendar-item>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-// import {
|
|
|
-// PropType,
|
|
|
-// computed,
|
|
|
-// watch,
|
|
|
-// reactive,
|
|
|
-// ref,
|
|
|
-// toRefs,
|
|
|
-// readonly
|
|
|
-// } from 'vue';
|
|
|
-import {
|
|
|
- PropType,
|
|
|
- computed,
|
|
|
- reactive,
|
|
|
- ref,
|
|
|
- watch,
|
|
|
- toRefs,
|
|
|
- onMounted
|
|
|
-} from 'vue';
|
|
|
+import { PropType, reactive, ref, watch, toRefs } from 'vue';
|
|
|
import { createComponent } from '@/utils/create';
|
|
|
const { componentName, create } = createComponent('calendar');
|
|
|
+import Popup from '@/packages/popup/index.vue';
|
|
|
+import CalendarItem from '@/packages/calendar-item/index.vue';
|
|
|
import Utils from '@/utils/date';
|
|
|
type InputDate = string | string[];
|
|
|
-interface CalendarState {
|
|
|
- childIsVisible: boolean;
|
|
|
- currDate: InputDate;
|
|
|
- unLoadPrev: boolean;
|
|
|
- touchParams: any;
|
|
|
- transformY: number;
|
|
|
- translateY: number;
|
|
|
- scrollDistance: number;
|
|
|
- defaultData: InputDate;
|
|
|
- chooseData: any;
|
|
|
- monthsData: any[];
|
|
|
- dayPrefix: string;
|
|
|
- startData: InputDate;
|
|
|
- endData: InputDate;
|
|
|
- isRange: boolean;
|
|
|
-}
|
|
|
|
|
|
export default create({
|
|
|
props: {
|
|
|
@@ -130,13 +59,15 @@ export default create({
|
|
|
type: Boolean,
|
|
|
default: true
|
|
|
},
|
|
|
+ isVisible: {
|
|
|
+ type: Boolean
|
|
|
+ },
|
|
|
title: {
|
|
|
type: String,
|
|
|
default: '日历选择'
|
|
|
},
|
|
|
defaultValue: {
|
|
|
- type: String as PropType<InputDate>,
|
|
|
- default: null
|
|
|
+ type: String as PropType<InputDate>
|
|
|
},
|
|
|
startDate: {
|
|
|
type: String,
|
|
|
@@ -148,480 +79,51 @@ export default create({
|
|
|
}
|
|
|
},
|
|
|
components: {},
|
|
|
- emits: ['choose', 'update', 'close'],
|
|
|
+ emits: ['choose', 'close'],
|
|
|
|
|
|
- setup(props, { emit, slots }) {
|
|
|
- const weeks = ref(['日', '一', '二', '三', '四', '五', '六']);
|
|
|
+ setup(props, { emit }) {
|
|
|
// element refs
|
|
|
- const months = ref<null | HTMLElement>(null);
|
|
|
- const monthsPanel = ref<null | HTMLElement>(null);
|
|
|
+ const mychild = ref<null | HTMLElement>(null);
|
|
|
+
|
|
|
// state
|
|
|
- let state: CalendarState = reactive({
|
|
|
- childIsVisible: false,
|
|
|
- currDate: '',
|
|
|
- unLoadPrev: false,
|
|
|
- touchParams: {
|
|
|
- startY: 0,
|
|
|
- endY: 0,
|
|
|
- startTime: 0,
|
|
|
- endTime: 0,
|
|
|
- lastY: 0,
|
|
|
- lastTime: 0
|
|
|
- },
|
|
|
- transformY: 0,
|
|
|
- translateY: 0,
|
|
|
- scrollDistance: 0,
|
|
|
- defaultData: [],
|
|
|
- chooseData: [],
|
|
|
- monthsData: [],
|
|
|
- dayPrefix: 'calendar-month-day',
|
|
|
- startData: '',
|
|
|
- endData: '',
|
|
|
- isRange: props.type === 'range'
|
|
|
+ const state = reactive({
|
|
|
+ childIsVisible: false
|
|
|
});
|
|
|
|
|
|
- // 日期转化成数组
|
|
|
- const splitDate = date => {
|
|
|
- return date.split('-');
|
|
|
- };
|
|
|
-
|
|
|
- const isStart = currDate => {
|
|
|
- return Utils.isEqual(state.currDate[0], currDate);
|
|
|
- };
|
|
|
-
|
|
|
- const isEnd = currDate => {
|
|
|
- return Utils.isEqual(state.currDate[1], currDate);
|
|
|
- };
|
|
|
-
|
|
|
- // 获取当前数据
|
|
|
- const getCurrDate = (day, month, isRange?) => {
|
|
|
- return isRange
|
|
|
- ? month.curData[3] +
|
|
|
- '-' +
|
|
|
- month.curData[4] +
|
|
|
- '-' +
|
|
|
- Utils.getNumTwoBit(day.day)
|
|
|
- : month.curData[0] +
|
|
|
- '-' +
|
|
|
- month.curData[1] +
|
|
|
- '-' +
|
|
|
- Utils.getNumTwoBit(day.day);
|
|
|
- };
|
|
|
-
|
|
|
- // 获取样式
|
|
|
- const getClass = (day, month, isRange?) => {
|
|
|
- let currDate = getCurrDate(day, month, isRange);
|
|
|
- if (day.type == 'curr') {
|
|
|
- if (
|
|
|
- (!state.isRange && Utils.isEqual(state.currDate, currDate)) ||
|
|
|
- (state.isRange && (isStart(currDate) || isEnd(currDate)))
|
|
|
- ) {
|
|
|
- return `${state.dayPrefix}-active`;
|
|
|
- } else if (
|
|
|
- (props.startDate && Utils.compareDate(currDate, props.startDate)) ||
|
|
|
- (props.endDate && Utils.compareDate(props.endDate, currDate))
|
|
|
- ) {
|
|
|
- return `${state.dayPrefix}-disabled`;
|
|
|
- } else if (
|
|
|
- state.isRange &&
|
|
|
- Array.isArray(state.currDate) &&
|
|
|
- Object.values(state.currDate).length == 2 &&
|
|
|
- Utils.compareDate(state.currDate[0], currDate) &&
|
|
|
- Utils.compareDate(currDate, state.currDate[1])
|
|
|
- ) {
|
|
|
- return `${state.dayPrefix}-choose`;
|
|
|
- } else {
|
|
|
- return null;
|
|
|
- }
|
|
|
- } else {
|
|
|
- return `${state.dayPrefix}-disabled`;
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 选中数据
|
|
|
- const chooseDay = (day, month, isFirst, isRange?) => {
|
|
|
- if (getClass(day, month, isRange) != `${state.dayPrefix}-disabled`) {
|
|
|
- let days = [...month.curData];
|
|
|
- days = isRange ? days.splice(3) : days.splice(0, 3);
|
|
|
- days[2] =
|
|
|
- typeof day.day == 'number' ? Utils.getNumTwoBit(day.day) : day.day;
|
|
|
- days[3] = `${days[0]}-${days[1]}-${days[2]}`;
|
|
|
- days[4] = Utils.getWhatDay(days[0], days[1], days[2]);
|
|
|
- if (!state.isRange) {
|
|
|
- state.currDate = days[3];
|
|
|
- state.chooseData = [...days];
|
|
|
- } else {
|
|
|
- if (Object.values(state.currDate).length == 2) {
|
|
|
- state.currDate = [days[3]];
|
|
|
- } else {
|
|
|
- if (Utils.compareDate(state.currDate[0], days[3])) {
|
|
|
- Array.isArray(state.currDate) && state.currDate.push(days[3]);
|
|
|
- } else {
|
|
|
- Array.isArray(state.currDate) && state.currDate.unshift(days[3]);
|
|
|
- }
|
|
|
- }
|
|
|
- if (state.chooseData.length == 2 || !state.chooseData.length) {
|
|
|
- state.chooseData = [...days];
|
|
|
- } else {
|
|
|
- if (Utils.compareDate(state.chooseData[3], days[3])) {
|
|
|
- state.chooseData = [[...state.chooseData], [...days]];
|
|
|
- } else {
|
|
|
- state.chooseData = [[...days], [...state.chooseData]];
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (props.isAutoBackFill && !isFirst) {
|
|
|
- confirm();
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 获取当前月数据
|
|
|
- const getCurrData = type => {
|
|
|
- let monthData =
|
|
|
- type == 'prev'
|
|
|
- ? state.monthsData[0]
|
|
|
- : state.monthsData[state.monthsData.length - 1];
|
|
|
- let year = parseInt(monthData.curData[0]);
|
|
|
- let month = parseInt(monthData.curData[1].toString().replace(/^0/, ''));
|
|
|
- switch (type) {
|
|
|
- case 'prev':
|
|
|
- month == 1 && (year -= 1);
|
|
|
- month = month == 1 ? 12 : --month;
|
|
|
- break;
|
|
|
- case 'next':
|
|
|
- month == 12 && (year += 1);
|
|
|
- month = month == 12 ? 1 : ++month;
|
|
|
- break;
|
|
|
- }
|
|
|
- return [year, Utils.getNumTwoBit(month), monthData.curData[2]];
|
|
|
- };
|
|
|
-
|
|
|
- // 获取日期状态
|
|
|
- const getDaysStatus = (days, type) => {
|
|
|
- // 修复：当某个月的1号是周日时，月份下方会空出来一行
|
|
|
- if (type == 'prev' && days >= 7) {
|
|
|
- days -= 7;
|
|
|
- }
|
|
|
- return Array.from(Array(days), (v, k) => {
|
|
|
- return {
|
|
|
- day: k + 1,
|
|
|
- type: type
|
|
|
- };
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- // 获取月数据
|
|
|
- const getMonth = (curData, type) => {
|
|
|
- const preMonthDays = Utils.getMonthPreDay(curData[0], curData[1]);
|
|
|
- const currMonthDays = Utils.getMonthDays(curData[0], curData[1]);
|
|
|
- const nextMonthDays = 42 - preMonthDays - currMonthDays;
|
|
|
- const title = {
|
|
|
- year: curData[0],
|
|
|
- month: curData[1]
|
|
|
- };
|
|
|
- const monthInfo = {
|
|
|
- curData: curData,
|
|
|
- title: `${title.year}年${title.month}月`,
|
|
|
- monthData: [
|
|
|
- ...getDaysStatus(preMonthDays, 'prev'),
|
|
|
- ...getDaysStatus(currMonthDays, 'curr')
|
|
|
- ]
|
|
|
- };
|
|
|
- if (type == 'next') {
|
|
|
- if (
|
|
|
- !state.endData ||
|
|
|
- !Utils.compareDate(
|
|
|
- `${state.endData[0]}-${state.endData[1]}-${Utils.getMonthDays(
|
|
|
- state.endData[0],
|
|
|
- state.endData[1]
|
|
|
- )}`,
|
|
|
- `${curData[0]}-${curData[1]}-${curData[2]}`
|
|
|
- )
|
|
|
- ) {
|
|
|
- state.monthsData.push(monthInfo);
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (
|
|
|
- !state.startData ||
|
|
|
- !Utils.compareDate(
|
|
|
- `${curData[0]}-${curData[1]}-${curData[2]}`,
|
|
|
- `${state.startData[0]}-${state.startData[1]}-01`
|
|
|
- )
|
|
|
- ) {
|
|
|
- state.monthsData.unshift(monthInfo);
|
|
|
- } else {
|
|
|
- state.unLoadPrev = true;
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 初始化数据
|
|
|
- const initData = () => {
|
|
|
- // 初始化开始结束数据
|
|
|
- state.startData = props.startDate ? splitDate(props.startDate) : null;
|
|
|
- state.endData = props.endDate ? splitDate(props.endDate) : null;
|
|
|
-
|
|
|
- // 初始化当前日期
|
|
|
- if (!props.defaultValue) {
|
|
|
- state.currDate = state.isRange
|
|
|
- ? [Utils.date2Str(new Date()), Utils.getDay(1)]
|
|
|
- : Utils.date2Str(new Date());
|
|
|
- } else {
|
|
|
- state.currDate = state.isRange
|
|
|
- ? [...props.defaultValue]
|
|
|
- : props.defaultValue;
|
|
|
- }
|
|
|
-
|
|
|
- // 日期转化为数组
|
|
|
- if (state.isRange && Array.isArray(state.currDate)) {
|
|
|
- if (
|
|
|
- props.startDate &&
|
|
|
- Utils.compareDate(state.currDate[0], props.startDate)
|
|
|
- ) {
|
|
|
- state.currDate.splice(0, 1, props.startDate);
|
|
|
- }
|
|
|
- if (
|
|
|
- props.endDate &&
|
|
|
- Utils.compareDate(props.endDate, state.currDate[1])
|
|
|
- ) {
|
|
|
- state.currDate.splice(1, 1, props.endDate);
|
|
|
- }
|
|
|
- state.defaultData = [
|
|
|
- ...splitDate(state.currDate[0]),
|
|
|
- ...splitDate(state.currDate[1])
|
|
|
- ];
|
|
|
- } else {
|
|
|
- if (
|
|
|
- props.startDate &&
|
|
|
- Utils.compareDate(state.currDate, props.startDate)
|
|
|
- ) {
|
|
|
- state.currDate = props.startDate;
|
|
|
- } else if (
|
|
|
- props.endDate &&
|
|
|
- !Utils.compareDate(state.currDate, props.endDate)
|
|
|
- ) {
|
|
|
- state.currDate = props.endDate;
|
|
|
- }
|
|
|
-
|
|
|
- state.defaultData = [...splitDate(state.currDate)];
|
|
|
- }
|
|
|
-
|
|
|
- getMonth(state.defaultData, 'next');
|
|
|
-
|
|
|
- let i = 1;
|
|
|
- do {
|
|
|
- getMonth(getCurrData('next'), 'next');
|
|
|
- } while (i++ < 4);
|
|
|
-
|
|
|
- if (state.isRange) {
|
|
|
- chooseDay(
|
|
|
- { day: state.defaultData[2], type: 'curr' },
|
|
|
- state.monthsData[0],
|
|
|
- true
|
|
|
- );
|
|
|
- chooseDay(
|
|
|
- { day: state.defaultData[5], type: 'curr' },
|
|
|
- state.monthsData[0],
|
|
|
- true,
|
|
|
- true
|
|
|
- );
|
|
|
- } else {
|
|
|
- chooseDay(
|
|
|
- { day: state.defaultData[2], type: 'curr' },
|
|
|
- state.monthsData[0],
|
|
|
- true
|
|
|
- );
|
|
|
- }
|
|
|
- console.log(state.currDate, 'state.currDate');
|
|
|
- };
|
|
|
-
|
|
|
- // 区间选择&&当前月&&选中态
|
|
|
- const isActive = (day, month) => {
|
|
|
- return (
|
|
|
- state.isRange &&
|
|
|
- day.type == 'curr' &&
|
|
|
- getClass(day, month) == 'calendar-month-day-active'
|
|
|
- );
|
|
|
- };
|
|
|
-
|
|
|
- const isStartTip = (day, month) => {
|
|
|
- if (isActive(day, month)) {
|
|
|
- return isStart(getCurrDate(day, month));
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const isEndTip = (day, month) => {
|
|
|
- return isActive(day, month);
|
|
|
- };
|
|
|
-
|
|
|
- const isCurrDay = (month, day) => {
|
|
|
- let date = `${month.curData[0]}-${month.curData[1]}-${day}`;
|
|
|
- return Utils.isEqual(date, Utils.date2Str(new Date()));
|
|
|
- };
|
|
|
-
|
|
|
- const confirm = () => {
|
|
|
- if ((state.isRange && state.chooseData.length == 2) || !state.isRange) {
|
|
|
- emit('choose', state.chooseData);
|
|
|
- if (props.poppable) {
|
|
|
- state.childIsVisible = false;
|
|
|
- emit('update');
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const touchStart = event => {
|
|
|
- let changedTouches = event.changedTouches[0];
|
|
|
- state.touchParams.startY = changedTouches.pageY;
|
|
|
- state.touchParams.startTime = event.timestamp || Date.now();
|
|
|
- state.transformY = state.scrollDistance;
|
|
|
- };
|
|
|
-
|
|
|
- const touchMove = event => {
|
|
|
- //event.preventDefault();
|
|
|
- let changedTouches = event.changedTouches[0];
|
|
|
- state.touchParams.lastY = changedTouches.pageY;
|
|
|
- state.touchParams.lastTime = event.timestamp || Date.now();
|
|
|
- let move = state.touchParams.lastY - state.touchParams.startY;
|
|
|
- if (Math.abs(move) < 5) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- setMove(move);
|
|
|
- };
|
|
|
-
|
|
|
- const touchEnd = event => {
|
|
|
- let changedTouches = event.changedTouches[0];
|
|
|
- state.touchParams.lastY = changedTouches.pageY;
|
|
|
- state.touchParams.lastTime = event.timestamp || Date.now();
|
|
|
- let move = state.touchParams.lastY - state.touchParams.startY;
|
|
|
- if (Math.abs(move) < 5) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- let updateMove = move + state.transformY;
|
|
|
- let h = months.value?.offsetHeight || 0;
|
|
|
- let offsetHeight = monthsPanel.value?.offsetHeight || 0;
|
|
|
-
|
|
|
- if (updateMove > 0) {
|
|
|
- getMonth(getCurrData('prev'), 'prev');
|
|
|
- } else if (updateMove < -offsetHeight + h * 2) {
|
|
|
- getMonth(getCurrData('next'), 'next');
|
|
|
- if (Math.abs(move) >= 300) {
|
|
|
- getMonth(getCurrData('next'), 'next');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- let moveTime = state.touchParams.lastTime - state.touchParams.startTime;
|
|
|
- if (moveTime <= 300) {
|
|
|
- move = move * 2;
|
|
|
- moveTime = moveTime + 1000;
|
|
|
- setMove(move, 'end', moveTime);
|
|
|
- } else {
|
|
|
- setMove(move, 'end');
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const setTransform = (translateY = 0, type?, time = 1000) => {
|
|
|
- if (type === 'end') {
|
|
|
- monthsPanel?.value &&
|
|
|
- (monthsPanel.value.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`);
|
|
|
- } else {
|
|
|
- monthsPanel?.value && (monthsPanel.value.style.webkitTransition = '');
|
|
|
- }
|
|
|
-
|
|
|
- monthsPanel?.value &&
|
|
|
- (monthsPanel.value.style.webkitTransform = `translateY(${translateY}px)`);
|
|
|
- state.scrollDistance = translateY;
|
|
|
+ // methods
|
|
|
+ const closeActionSheet = () => {
|
|
|
+ //mychild.value && mychild.value.closeActionSheet();
|
|
|
};
|
|
|
|
|
|
- const setMove = (move, type?, time?) => {
|
|
|
- let updateMove = move + state.transformY;
|
|
|
- let h = months.value?.offsetHeight || 0;
|
|
|
-
|
|
|
- let offsetHeight = monthsPanel.value?.offsetHeight || 0;
|
|
|
-
|
|
|
- if (type === 'end') {
|
|
|
- // 限定滚动距离
|
|
|
- if (updateMove > 0) {
|
|
|
- updateMove = 0;
|
|
|
- }
|
|
|
- if (updateMove < 0 && updateMove < -offsetHeight + h) {
|
|
|
- updateMove = -offsetHeight + h;
|
|
|
- }
|
|
|
- if (offsetHeight <= h && state.monthsData.length == 1) {
|
|
|
- updateMove = 0;
|
|
|
- }
|
|
|
- let endMove = updateMove;
|
|
|
- setTransform(endMove, type, time);
|
|
|
- } else {
|
|
|
- if (updateMove > 0 && updateMove > 100) {
|
|
|
- updateMove = 100;
|
|
|
- }
|
|
|
- if (
|
|
|
- updateMove < -offsetHeight + h - 100 &&
|
|
|
- state.monthsData.length > 1
|
|
|
- ) {
|
|
|
- updateMove = -offsetHeight + h - 100;
|
|
|
- }
|
|
|
- if (
|
|
|
- updateMove < 0 &&
|
|
|
- updateMove < -100 &&
|
|
|
- state.monthsData.length == 1
|
|
|
- ) {
|
|
|
- updateMove = -100;
|
|
|
- }
|
|
|
- setTransform(updateMove);
|
|
|
- }
|
|
|
+ const update = () => {
|
|
|
+ state.childIsVisible = false;
|
|
|
};
|
|
|
|
|
|
- const resetRender = () => {
|
|
|
- state.chooseData.splice(0);
|
|
|
- state.monthsData.splice(0);
|
|
|
- state.scrollDistance = 0;
|
|
|
- state.translateY = 0;
|
|
|
- setTransform(state.scrollDistance);
|
|
|
- initData();
|
|
|
+ const close = () => {
|
|
|
+ emit('close');
|
|
|
};
|
|
|
|
|
|
- const closeActionSheet = () => {
|
|
|
- if (props.poppable) {
|
|
|
- state.childIsVisible = false;
|
|
|
- emit('update');
|
|
|
- emit('close');
|
|
|
- }
|
|
|
- resetRender();
|
|
|
+ const choose = param => {
|
|
|
+ close();
|
|
|
+ emit('choose', param);
|
|
|
};
|
|
|
|
|
|
- // 初始化
|
|
|
- initData();
|
|
|
-
|
|
|
- //监听 默认值更改
|
|
|
watch(
|
|
|
- () => props.defaultValue,
|
|
|
- (val, prevVal) => {
|
|
|
+ () => props.isVisible,
|
|
|
+ val => {
|
|
|
if (val) {
|
|
|
- console.log(val, 'init');
|
|
|
- resetRender();
|
|
|
+ state.childIsVisible = true;
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
|
|
|
return {
|
|
|
- weeks,
|
|
|
- touchStart,
|
|
|
- touchMove,
|
|
|
- touchEnd,
|
|
|
- getClass,
|
|
|
- isStartTip,
|
|
|
- isEndTip,
|
|
|
- chooseDay,
|
|
|
- isCurrDay,
|
|
|
- confirm,
|
|
|
- monthsPanel,
|
|
|
- months,
|
|
|
- ...toRefs(state),
|
|
|
+ closeActionSheet,
|
|
|
+ update,
|
|
|
+ close,
|
|
|
+ choose,
|
|
|
+ mychild,
|
|
|
+ state,
|
|
|
...toRefs(props)
|
|
|
};
|
|
|
}
|
|
|
@@ -629,5 +131,7 @@ export default create({
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-@import 'index.scss';
|
|
|
+.popup-box {
|
|
|
+ height: 518px;
|
|
|
+}
|
|
|
</style>
|
songchenglin3