From d8b41fff43a2cee6a8f714ffa807623b15803786 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 20 Oct 2023 15:21:35 +0800 Subject: [PATCH] fix:立行立改Uniapp小程序新建项目 --- uni_modules/uview-ui/components/u-calendar/u-calendar.vue | 384 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 384 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-calendar/u-calendar.vue b/uni_modules/uview-ui/components/u-calendar/u-calendar.vue new file mode 100644 index 0000000..511f993 --- /dev/null +++ b/uni_modules/uview-ui/components/u-calendar/u-calendar.vue @@ -0,0 +1,384 @@ +<template> + <u-popup + :show="show" + mode="bottom" + closeable + @close="close" + :round="round" + :closeOnClickOverlay="closeOnClickOverlay" + > + <view class="u-calendar"> + <uHeader + :title="title" + :subtitle="subtitle" + :showSubtitle="showSubtitle" + :showTitle="showTitle" + ></uHeader> + <scroll-view + :style="{ + height: $u.addUnit(listHeight) + }" + scroll-y + @scroll="onScroll" + :scroll-top="scrollTop" + :scrollIntoView="scrollIntoView" + > + <uMonth + :color="color" + :rowHeight="rowHeight" + :showMark="showMark" + :months="months" + :mode="mode" + :maxCount="maxCount" + :startText="startText" + :endText="endText" + :defaultDate="defaultDate" + :minDate="innerMinDate" + :maxDate="innerMaxDate" + :maxMonth="monthNum" + :readonly="readonly" + :maxRange="maxRange" + :rangePrompt="rangePrompt" + :showRangePrompt="showRangePrompt" + :allowSameDay="allowSameDay" + ref="month" + @monthSelected="monthSelected" + @updateMonthTop="updateMonthTop" + ></uMonth> + </scroll-view> + <slot name="footer" v-if="showConfirm"> + <view class="u-calendar__confirm"> + <u-button + shape="circle" + :text=" + buttonDisabled ? confirmDisabledText : confirmText + " + :color="color" + @click="confirm" + :disabled="buttonDisabled" + ></u-button> + </view> + </slot> + </view> + </u-popup> +</template> + +<script> +import uHeader from './header.vue' +import uMonth from './month.vue' +import props from './props.js' +import util from './util.js' +import dayjs from '../../libs/util/dayjs.js' +import Calendar from '../../libs/util/calendar.js' +/** + * Calendar ������ + * @description ������������������������������������������������������������������������������������������������������. + * @tutorial https://www.uviewui.com/components/calendar.html + * + * @property {String} title ������������ (������ ������������ ) + * @property {Boolean} showTitle ������������������ (������ true ) + * @property {Boolean} showSubtitle ��������������������� (������ true ) + * @property {String} mode ������������������ single-���������������������multiple-���������������������������range-������������������ ��� ������ 'single' ) + * @property {String} startText mode=range������������������������������������������ (������ '������' ) + * @property {String} endText mode=range��������������������������������������������� (������ '������' ) + * @property {Array} customList ��������������� + * @property {String} color ������������������������������������������������ (������ ���#3c9cff' ) + * @property {String | Number} minDate ��������������������� (������ 0 ) + * @property {String | Number} maxDate ������������������ (������ 0 ) + * @property {Array | String| Date} defaultDate ������������������������mode���multiple���range������������������������ + * @property {String | Number} maxCount mode=multiple��������������������������������� (������ Number.MAX_SAFE_INTEGER ) + * @property {String | Number} rowHeight ������������ (������ 56 ) + * @property {Function} formatter ��������������������� + * @property {Boolean} showLunar ������������������ (������ false ) + * @property {Boolean} showMark ��������������������������� (������ true ) + * @property {String} confirmText ��������������������� (������ '������' ) + * @property {String} confirmDisabledText ������������������������������������������ (������ '������' ) + * @property {Boolean} show ������������������������ (������ false ) + * @property {Boolean} closeOnClickOverlay ������������������������������������ (������ false ) + * @property {Boolean} readonly ��������������������������������������������������������� (������ false ) + * @property {String | Number} maxRange ���������������������������������������������������mode = range��������� + * @property {String} rangePrompt ���������������������������������������������������������mode = range��������� + * @property {Boolean} showRangePrompt ���������������������������������������������������������������������mode = range��������� (������ true ) + * @property {Boolean} allowSameDay ������������������������������������������������������mode = range��������� (������ false ) + * @property {Number|String} round ��������������������������� (������ 0 ) + * @property {Number|String} monthNum ��������������������������� (������ 3 ) + * + * @event {Function()} confirm ��������������������������� ��������������������������������� + * @event {Function()} close ��������������������� ��������������������������������������� + * @example <u-calendar :defaultDate="defaultDateMultiple" :show="show" mode="multiple" @confirm="confirm"> + </u-calendar> + * */ +export default { + name: 'u-calendar', + mixins: [uni.$u.mpMixin, uni.$u.mixin, props], + components: { + uHeader, + uMonth + }, + data() { + return { + // ������������������������������ + months: [], + // ���������������������������������������������������index������ + monthIndex: 0, + // ��������������������������� + listHeight: 0, + // month������������������������������ + selected: [], + scrollIntoView: '', + scrollTop:0, + // ������������������ + innerFormatter: (value) => value + } + }, + watch: { + selectedChange: { + immediate: true, + handler(n) { + this.setMonth() + } + }, + // ������������������������������������ + show: { + immediate: true, + handler(n) { + this.setMonth() + } + } + }, + computed: { + // ������maxDate���minDate������������������(2021-10-10)���������������(���������)���������dayjs������������������������������������������������������������������������ + innerMaxDate() { + return uni.$u.test.number(this.maxDate) + ? Number(this.maxDate) + : this.maxDate + }, + innerMinDate() { + return uni.$u.test.number(this.minDate) + ? Number(this.minDate) + : this.minDate + }, + // ��������������������������������������������������������������������������������� + selectedChange() { + return [this.innerMinDate, this.innerMaxDate, this.defaultDate] + }, + subtitle() { + // ���������������this.months��������������������������������������������� + if (this.months.length) { + return `${this.months[this.monthIndex].year}���${ + this.months[this.monthIndex].month + }���` + } else { + return '' + } + }, + buttonDisabled() { + // ���������range���������������������������������������1���������������������������������disabled������ + if (this.mode === 'range') { + if (this.selected.length <= 1) { + return true + } else { + return false + } + } else { + return false + } + } + }, + mounted() { + this.start = Date.now() + this.init() + }, + methods: { + // ������������������������������������������������props������������������������ref������������ + setFormatter(e) { + this.innerFormatter = e + }, + // month������������������������������������������������������������ + monthSelected(e) { + this.selected = e + if (!this.showConfirm) { + // ������������������������������������������������������������������������������������������������2������������������������ + if ( + this.mode === 'multiple' || + this.mode === 'single' || + (this.mode === 'range' && this.selected.length >= 2) + ) { + this.$emit('confirm', this.selected) + } + } + }, + init() { + // ������maxDate���������������minDate + if ( + this.innerMaxDate && + this.innerMinDate && + new Date(this.innerMaxDate).getTime() < new Date(this.innerMinDate).getTime() + ) { + return uni.$u.error('maxDate������������minDate') + } + // ��������������������� + this.listHeight = this.rowHeight * 5 + 30 + this.setMonth() + }, + close() { + this.$emit('close') + }, + // ������������������ + confirm() { + if (!this.buttonDisabled) { + this.$emit('confirm', this.selected) + } + }, + // ������������������������������������ + getMonths(minDate, maxDate) { + const minYear = dayjs(minDate).year() + const minMonth = dayjs(minDate).month() + 1 + const maxYear = dayjs(maxDate).year() + const maxMonth = dayjs(maxDate).month() + 1 + return (maxYear - minYear) * 12 + (maxMonth - minMonth) + 1 + }, + // ������������������ + setMonth() { + // ������������������������ + const minDate = this.innerMinDate || dayjs().valueOf() + // ���������������������������������������������3������ + const maxDate = + this.innerMaxDate || + dayjs(minDate) + .add(this.monthNum - 1, 'month') + .valueOf() + // ��������������������������������������������������� + const months = uni.$u.range( + 1, + this.monthNum, + this.getMonths(minDate, maxDate) + ) + // ��������������� + this.months = [] + for (let i = 0; i < months; i++) { + this.months.push({ + date: new Array( + dayjs(minDate).add(i, 'month').daysInMonth() + ) + .fill(1) + .map((item, index) => { + // ���������������1-31 + let day = index + 1 + // ���������0-6���0��������� + const week = dayjs(minDate) + .add(i, 'month') + .date(day) + .day() + const date = dayjs(minDate) + .add(i, 'month') + .date(day) + .format('YYYY-MM-DD') + let bottomInfo = '' + if (this.showLunar) { + // ��������������������������� + const lunar = Calendar.solar2lunar( + dayjs(date).year(), + dayjs(date).month() + 1, + dayjs(date).date() + ) + bottomInfo = lunar.IDayCn + } + let config = { + day, + week, + // ������������������������������������������������������������������������disabled������ + disabled: + dayjs(date).isBefore( + dayjs(minDate).format('YYYY-MM-DD') + ) || + dayjs(date).isAfter( + dayjs(maxDate).format('YYYY-MM-DD') + ), + // ���������������������������������������formatter������������������������������������������������������������ + date: new Date(date), + bottomInfo, + dot: false, + month: + dayjs(minDate).add(i, 'month').month() + 1 + } + const formatter = + this.formatter || this.innerFormatter + return formatter(config) + }), + // ��������������������� + month: dayjs(minDate).add(i, 'month').month() + 1, + // ������������ + year: dayjs(minDate).add(i, 'month').year() + }) + } + + }, + // ������������������������������ + scrollIntoDefaultMonth(selected) { + // ������������������������������������������ + const _index = this.months.findIndex(({ + year, + month + }) => { + month = uni.$u.padZero(month) + return `${year}-${month}` === selected + }) + if (_index !== -1) { + // #ifndef MP-WEIXIN + this.$nextTick(() => { + this.scrollIntoView = `month-${_index}` + }) + // #endif + // #ifdef MP-WEIXIN + this.scrollTop = this.months[_index].top || 0; + // #endif + } + }, + // scroll-view������������ + onScroll(event) { + // ���������������0���������������������scroll-view��������������������������������������������� + const scrollTop = Math.max(0, event.detail.scrollTop) + // ��������������������������������������������������������������������������������������������������������������� + for (let i = 0; i < this.months.length; i++) { + if (scrollTop >= (this.months[i].top || this.listHeight)) { + this.monthIndex = i + } + } + }, + // ���������������top��� + updateMonthTop(topArr = []) { + // ���������������������top������������onScroll������������������ + topArr.map((item, index) => { + this.months[index].top = item + }) + + // ��������������������������� + if (!this.defaultDate) { + // ��������������������������������������������������������������������������������� + const selected = dayjs().format("YYYY-MM") + this.scrollIntoDefaultMonth(selected) + return + } + let selected = dayjs().format("YYYY-MM"); + // ���������������������������������������������Date��������� + if (!uni.$u.test.array(this.defaultDate)) { + selected = dayjs(this.defaultDate).format("YYYY-MM") + } else { + selected = dayjs(this.defaultDate[0]).format("YYYY-MM"); + } + this.scrollIntoDefaultMonth(selected) + } + } +} +</script> + +<style lang="scss" scoped> +@import '../../libs/css/components.scss'; + +.u-calendar { + &__confirm { + padding: 7px 18px; + } +} +</style> -- Gitblit v1.8.0