From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
uni_modules/uview-ui/components/u-calendar/month.vue | 579 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 579 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-calendar/month.vue b/uni_modules/uview-ui/components/u-calendar/month.vue
new file mode 100644
index 0000000..c20937f
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-calendar/month.vue
@@ -0,0 +1,579 @@
+<template>
+ <view class="u-calendar-month-wrapper" ref="u-calendar-month-wrapper">
+ <view v-for="(item, index) in months" :key="index" :class="[`u-calendar-month-${index}`]"
+ :ref="`u-calendar-month-${index}`" :id="`month-${index}`">
+ <text v-if="index !== 0" class="u-calendar-month__title">{{ item.year }}骞磠{ item.month }}鏈�</text>
+ <view class="u-calendar-month__days">
+ <view v-if="showMark" class="u-calendar-month__days__month-mark-wrapper">
+ <text class="u-calendar-month__days__month-mark-wrapper__text">{{ item.month }}</text>
+ </view>
+ <view class="u-calendar-month__days__day" v-for="(item1, index1) in item.date" :key="index1"
+ :style="[dayStyle(index, index1, item1)]" @tap="clickHandler(index, index1, item1)"
+ :class="[item1.selected && 'u-calendar-month__days__day__select--selected']">
+ <view class="u-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]">
+ <text class="u-calendar-month__days__day__select__info"
+ :class="[item1.disabled && 'u-calendar-month__days__day__select__info--disabled']"
+ :style="[textStyle(item1)]">{{ item1.day }}</text>
+ <text v-if="getBottomInfo(index, index1, item1)"
+ class="u-calendar-month__days__day__select__buttom-info"
+ :class="[item1.disabled && 'u-calendar-month__days__day__select__buttom-info--disabled']"
+ :style="[textStyle(item1)]">{{ getBottomInfo(index, index1, item1) }}</text>
+ <text v-if="item1.dot" class="u-calendar-month__days__day__select__dot"></text>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ // #ifdef APP-NVUE
+ // 鐢变簬nvue涓嶆敮鎸佺櫨鍒嗘瘮鍗曚綅锛岄渶瑕佹煡璇㈠搴︽潵璁＄畻姣忎釜鏃ユ湡鐨勫搴�
+ const dom = uni.requireNativePlugin('dom')
+ // #endif
+ import dayjs from '../../libs/util/dayjs.js';
+ export default {
+ name: 'u-calendar-month',
+ mixins: [uni.$u.mpMixin, uni.$u.mixin],
+ props: {
+ // 鏄惁鏄剧ず鏈堜唤鑳屾櫙鑹�
+ showMark: {
+ type: Boolean,
+ default: true
+ },
+ // 涓婚鑹诧紝瀵瑰簳閮ㄦ寜閽拰閫変腑鏃ユ湡鏈夋晥
+ color: {
+ type: String,
+ default: '#3c9cff'
+ },
+ // 鏈堜唤鏁版嵁
+ months: {
+ type: Array,
+ default: () => []
+ },
+ // 鏃ユ湡閫夋嫨绫诲瀷
+ mode: {
+ type: String,
+ default: 'single'
+ },
+ // 鏃ユ湡琛岄珮
+ rowHeight: {
+ type: [String, Number],
+ default: 58
+ },
+ // mode=multiple鏃讹紝鏈�澶氬彲閫夊灏戜釜鏃ユ湡
+ maxCount: {
+ type: [String, Number],
+ default: Infinity
+ },
+ // mode=range鏃讹紝绗竴涓棩鏈熷簳閮ㄧ殑鎻愮ず鏂囧瓧
+ startText: {
+ type: String,
+ default: '寮�濮�'
+ },
+ // mode=range鏃讹紝鏈�鍚庝竴涓棩鏈熷簳閮ㄧ殑鎻愮ず鏂囧瓧
+ endText: {
+ type: String,
+ default: '缁撴潫'
+ },
+ // 榛樿閫変腑鐨勬棩鏈燂紝mode涓簃ultiple鎴杛ange鏄繀椤讳负鏁扮粍鏍煎紡
+ defaultDate: {
+ type: [Array, String, Date],
+ default: null
+ },
+ // 鏈�灏忕殑鍙�夋棩鏈�
+ minDate: {
+ type: [String, Number],
+ default: 0
+ },
+ // 鏈�澶у彲閫夋棩鏈�
+ maxDate: {
+ type: [String, Number],
+ default: 0
+ },
+ // 濡傛灉娌℃湁璁剧疆maxDate锛屽垯寰�鍚庢帹澶氬皯涓湀
+ maxMonth: {
+ type: [String, Number],
+ default: 2
+ },
+ // 鏄惁涓哄彧璇荤姸鎬侊紝鍙鐘舵�佷笅绂佹閫夋嫨鏃ユ湡
+ readonly: {
+ type: Boolean,
+ default: uni.$u.props.calendar.readonly
+ },
+ // 鏃ユ湡鍖洪棿鏈�澶氬彲閫夊ぉ鏁帮紝榛樿鏃犻檺鍒讹紝mode = range鏃舵湁鏁�
+ maxRange: {
+ type: [Number, String],
+ default: Infinity
+ },
+ // 鑼冨洿閫夋嫨瓒呰繃鏈�澶氬彲閫夊ぉ鏁版椂鐨勬彁绀烘枃妗堬紝mode = range鏃舵湁鏁�
+ rangePrompt: {
+ type: String,
+ default: ''
+ },
+ // 鑼冨洿閫夋嫨瓒呰繃鏈�澶氬彲閫夊ぉ鏁版椂锛屾槸鍚﹀睍绀烘彁绀烘枃妗堬紝mode = range鏃舵湁鏁�
+ showRangePrompt: {
+ type: Boolean,
+ default: true
+ },
+ // 鏄惁鍏佽鏃ユ湡鑼冨洿鐨勮捣姝㈡椂闂翠负鍚屼竴澶╋紝mode = range鏃舵湁鏁�
+ allowSameDay: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data() {
+ return {
+ // 姣忎釜鏃ユ湡鐨勫搴�
+ width: 0,
+ // 褰撳墠閫変腑鐨勬棩鏈焛tem
+ item: {},
+ selected: []
+ }
+ },
+ watch: {
+ selectedChange: {
+ immediate: true,
+ handler(n) {
+ this.setDefaultDate()
+ }
+ }
+ },
+ computed: {
+ // 澶氫釜鏉′欢鐨勫彉鍖栵紝浼氬紩璧烽�変腑鏃ユ湡鐨勫彉鍖栵紝杩欓噷缁熶竴绠＄悊鐩戝惉
+ selectedChange() {
+ return [this.minDate, this.maxDate, this.defaultDate]
+ },
+ dayStyle(index1, index2, item) {
+ return (index1, index2, item) => {
+ const style = {}
+ let week = item.week
+ // 涓嶈繘琛屽洓鑸嶄簲鍏ョ殑褰㈠紡淇濈暀2浣嶅皬鏁�
+ const dayWidth = Number(parseFloat(this.width / 7).toFixed(3).slice(0, -1))
+ // 寰楀嚭姣忎釜鏃ユ湡鐨勫搴�
+ // #ifdef APP-NVUE
+ style.width = uni.$u.addUnit(dayWidth)
+ // #endif
+ style.height = uni.$u.addUnit(this.rowHeight)
+ if (index2 === 0) {
+ // 鑾峰彇褰撳墠涓烘槦鏈熷嚑锛屽鏋滀负0锛屽垯涓烘槦鏈熷ぉ锛屽噺涓�涓烘瘡鏈堢涓�澶╂椂锛岄渶瑕佸悜宸﹀亸绉荤殑item涓暟
+ week = (week === 0 ? 7 : week) - 1
+ style.marginLeft = uni.$u.addUnit(week * dayWidth)
+ }
+ if (this.mode === 'range') {
+ // 涔嬫墍浠ラ渶瑕佽繖涔堝啓锛屾槸鍥犱负DCloud鍏徃鐨刬OS瀹㈡埛绔殑寮�鍙戣�呰兘鍔涙湁闄愬鑷寸殑bug
+ style.paddingLeft = 0
+ style.paddingRight = 0
+ style.paddingBottom = 0
+ style.paddingTop = 0
+ }
+ return style
+ }
+ },
+ daySelectStyle() {
+ return (index1, index2, item) => {
+ let date = dayjs(item.date).format("YYYY-MM-DD"),
+ style = {}
+ // 鍒ゆ柇date鏄惁鍦╯elected鏁扮粍涓紝鍥犱负鏈堜唤鍙兘浼氶渶瑕佽ˉ0锛屾墍浠ヤ娇鐢╠ateSame鍒ゆ柇锛岃�屼笉鐢ㄦ暟缁勭殑includes鍒ゆ柇
+ if (this.selected.some(item => this.dateSame(item, date))) {
+ style.backgroundColor = this.color
+ }
+ if (this.mode === 'single') {
+ if (date === this.selected[0]) {
+ // 鍥犱负闇�瑕佸nvue鐨勫吋瀹癸紝鍙兘杩欎箞鍐欙紝鏃犳硶缂╁啓锛屼篃鏃犳硶閫氳繃绫诲悕鎺у埗绛夌瓑
+ style.borderTopLeftRadius = '3px'
+ style.borderBottomLeftRadius = '3px'
+ style.borderTopRightRadius = '3px'
+ style.borderBottomRightRadius = '3px'
+ }
+ } else if (this.mode === 'range') {
+ if (this.selected.length >= 2) {
+ const len = this.selected.length - 1
+ // 绗竴涓棩鏈熻缃乏涓婅鍜屽乏涓嬭鐨勫渾瑙�
+ if (this.dateSame(date, this.selected[0])) {
+ style.borderTopLeftRadius = '3px'
+ style.borderBottomLeftRadius = '3px'
+ }
+ // 鏈�鍚庝竴涓棩鏈熻缃彸涓婅鍜屽彸涓嬭鐨勫渾瑙�
+ if (this.dateSame(date, this.selected[len])) {
+ style.borderTopRightRadius = '3px'
+ style.borderBottomRightRadius = '3px'
+ }
+ // 澶勪簬绗竴鍜屾渶鍚庝竴涓箣闂寸殑鏃ユ湡锛岃儗鏅壊璁剧疆涓烘祬鑹诧紝閫氳繃灏嗗搴旈鑹茶繘琛岀瓑鍒嗭紝鍐嶅彇鍏跺熬閮ㄧ殑棰滆壊鍊�
+ if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this
+ .selected[len]))) {
+ style.backgroundColor = uni.$u.colorGradient(this.color, '#ffffff', 100)[90]
+ // 澧炲姞涓�涓�忔槑搴︼紝璁╄寖鍥村尯闂寸殑鑳屾櫙鑹蹭篃鑳界湅鍒板簳閮ㄧ殑mark姘村嵃瀛楃
+ style.opacity = 0.7
+ }
+ } else if (this.selected.length === 1) {
+ // 涔嬫墍浠ラ渶瑕佽繖涔堝啓锛屾槸鍥犱负DCloud鍏徃鐨刬OS瀹㈡埛绔殑寮�鍙戣�呰兘鍔涙湁闄愬鑷寸殑bug
+ // 杩涜杩樺師鎿嶄綔锛屽惁鍒欏湪nvue鐨刬OS锛寀ni-app鏈塨ug锛屼細瀵艰嚧璇″紓鐨勮〃鐜�
+ style.borderTopLeftRadius = '3px'
+ style.borderBottomLeftRadius = '3px'
+ }
+ } else {
+ if (this.selected.some(item => this.dateSame(item, date))) {
+ style.borderTopLeftRadius = '3px'
+ style.borderBottomLeftRadius = '3px'
+ style.borderTopRightRadius = '3px'
+ style.borderBottomRightRadius = '3px'
+ }
+ }
+ return style
+ }
+ },
+ // 鏌愪釜鏃ユ湡鏄惁琚�変腑
+ textStyle() {
+ return (item) => {
+ const date = dayjs(item.date).format("YYYY-MM-DD"),
+ style = {}
+ // 閫変腑鐨勬棩鏈燂紝鎻愮ず鏂囧瓧璁剧疆鐧借壊
+ if (this.selected.some(item => this.dateSame(item, date))) {
+ style.color = '#ffffff'
+ }
+ if (this.mode === 'range') {
+ const len = this.selected.length - 1
+ // 濡傛灉鏄寖鍥撮�夋嫨妯″紡锛岀涓�涓拰鏈�鍚庝竴涓箣闂寸殑鏃ユ湡锛屾枃瀛楅鑹茶缃负楂樹寒鐨勪富棰樿壊
+ if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this
+ .selected[len]))) {
+ style.color = this.color
+ }
+ }
+ return style
+ }
+ },
+ // 鑾峰彇搴曢儴鐨勬彁绀烘枃瀛�
+ getBottomInfo() {
+ return (index1, index2, item) => {
+ const date = dayjs(item.date).format("YYYY-MM-DD")
+ const bottomInfo = item.bottomInfo
+ // 褰撲负鏃ユ湡鑼冨洿妯″紡鏃讹紝涓旈�夋嫨鐨勬棩鏈熶釜鏁板ぇ浜�0鏃�
+ if (this.mode === 'range' && this.selected.length > 0) {
+ if (this.selected.length === 1) {
+ // 閫夋嫨浜嗕竴涓棩鏈熸椂锛屽鏋滃綋鍓嶆棩鏈熶负鏁扮粍涓殑绗竴涓棩鏈燂紝鍒欐樉绀哄簳閮ㄦ枃瀛椾负鈥滃紑濮嬧��
+ if (this.dateSame(date, this.selected[0])) return this.startText
+ else return bottomInfo
+ } else {
+ const len = this.selected.length - 1
+ // 濡傛灉鏁扮粍涓殑鏃ユ湡澶т簬2涓椂锛岀涓�涓拰鏈�鍚庝竴涓樉绀轰负寮�濮嬪拰缁撴潫鏃ユ湡
+ if (this.dateSame(date, this.selected[0]) && this.dateSame(date, this.selected[1]) &&
+ len === 1) {
+ // 濡傛灉闀垮害涓�2锛屼笖绗竴涓瓑浜庣浜屼釜鏃ユ湡锛屽垯鎻愮ず璇斁鍦ㄥ悓涓�涓猧tem涓�
+ return `${this.startText}/${this.endText}`
+ } else if (this.dateSame(date, this.selected[0])) {
+ return this.startText
+ } else if (this.dateSame(date, this.selected[len])) {
+ return this.endText
+ } else {
+ return bottomInfo
+ }
+ }
+ } else {
+ return bottomInfo
+ }
+ }
+ }
+ },
+ mounted() {
+ this.init()
+ },
+ methods: {
+ init() {
+ // 鍒濆鍖栭粯璁ら�変腑
+ this.$emit('monthSelected', this.selected)
+ this.$nextTick(() => {
+ // 杩欓噷闇�瑕佸彟涓�涓欢鏃讹紝鍥犱负鑾峰彇瀹藉害鍚庯紝浼氳繘琛屾湀浠芥暟鎹覆鏌擄紝鍙湁娓叉煋瀹屾垚涔嬪悗锛屾墠鏈夌湡姝ｇ殑楂樺害
+ // 鍥犱负nvue涓嬶紝$nextTick骞朵笉鏄�100%鍙潬鐨�
+ uni.$u.sleep(10).then(() => {
+ this.getWrapperWidth()
+ this.getMonthRect()
+ })
+ })
+ },
+ // 鍒ゆ柇涓や釜鏃ユ湡鏄惁鐩哥瓑
+ dateSame(date1, date2) {
+ return dayjs(date1).isSame(dayjs(date2))
+ },
+ // 鑾峰彇鏈堜唤鏁版嵁鍖哄煙鐨勫搴︼紝鍥犱负nvue涓嶆敮鎸佺櫨鍒嗘瘮锛屾墍浠ユ棤娉曢�氳繃css璁剧疆姣忎釜鏃ユ湡item鐨勫搴�
+ getWrapperWidth() {
+ // #ifdef APP-NVUE
+ dom.getComponentRect(this.$refs['u-calendar-month-wrapper'], res => {
+ this.width = res.size.width
+ })
+ // #endif
+ // #ifndef APP-NVUE
+ this.$uGetRect('.u-calendar-month-wrapper').then(size => {
+ this.width = size.width
+ })
+ // #endif
+ },
+ getMonthRect() {
+ // 鑾峰彇姣忎釜鏈堜唤鏁版嵁鐨勫昂瀵革紝鐢ㄤ簬鐖剁粍浠跺湪scroll-view婊氬姩浜嬩欢涓紝鐩戝惉褰撳墠婊氬姩鍒颁簡绗嚑涓湀浠�
+ const promiseAllArr = this.months.map((item, index) => this.getMonthRectByPromise(
+ `u-calendar-month-${index}`))
+ // 涓�娆℃�ц繑鍥�
+ Promise.all(promiseAllArr).then(
+ sizes => {
+ let height = 1
+ const topArr = []
+ for (let i = 0; i < this.months.length; i++) {
+ // 娣诲姞鍒癿onths鏁扮粍涓紝渚泂croll-view婊氬姩浜嬩欢涓紝鍒ゆ柇褰撳墠婊氬姩鍒板摢涓湀浠�
+ topArr[i] = height
+ height += sizes[i].height
+ }
+ // 鐢变簬寰俊涓嬶紝鏃犳硶閫氳繃this.months[i].top鐨勫舰寮�(寮曠敤绫诲瀷)鍘讳慨鏀圭埗缁勪欢鐨刴onth鐨則op鍊硷紝鎵�浠ヤ娇鐢ㄤ簨浠跺舰寮忓澶栧彂鍑�
+ this.$emit('updateMonthTop', topArr)
+ })
+ },
+ // 鑾峰彇姣忎釜鏈堜唤鍖哄煙鐨勫昂瀵�
+ getMonthRectByPromise(el) {
+ // #ifndef APP-NVUE
+ // $uGetRect涓簎View鑷甫鐨勮妭鐐规煡璇㈢畝鍖栨柟娉曪紝璇﹁鏂囨。浠嬬粛锛歨ttps://www.uviewui.com/js/getRect.html
+ // 缁勪欢鍐呴儴涓�鑸敤this.$uGetRect锛屽澶栫殑涓簎ni.$u.getRect锛屼簩鑰呭姛鑳戒竴鑷达紝鍚嶇О涓嶅悓
+ return new Promise(resolve => {
+ this.$uGetRect(`.${el}`).then(size => {
+ resolve(size)
+ })
+ })
+ // #endif
+
+ // #ifdef APP-NVUE
+ // nvue涓嬶紝浣跨敤dom妯″潡鏌ヨ鍏冪礌楂樺害
+ // 杩斿洖涓�涓猵romise锛岃璋冪敤姝ゆ柟娉曠殑涓讳綋鑳戒娇鐢╰hen鍥炶皟
+ return new Promise(resolve => {
+ dom.getComponentRect(this.$refs[el][0], res => {
+ resolve(res.size)
+ })
+ })
+ // #endif
+ },
+ // 鐐瑰嚮鏌愪竴涓棩鏈�
+ clickHandler(index1, index2, item) {
+ if (this.readonly) {
+ return;
+ }
+ this.item = item
+ const date = dayjs(item.date).format("YYYY-MM-DD")
+ if (item.disabled) return
+ // 瀵逛笂涓�娆￠�夋嫨鐨勬棩鏈熸暟缁勮繘琛屾繁搴﹀厠闅�
+ let selected = uni.$u.deepClone(this.selected)
+ if (this.mode === 'single') {
+ // 鍗曢�夋儏鍐典笅锛岃鏁扮粍涓殑鍏冪礌涓哄綋鍓嶇偣鍑荤殑鏃ユ湡
+ selected = [date]
+ } else if (this.mode === 'multiple') {
+ if (selected.some(item => this.dateSame(item, date))) {
+ // 濡傛灉鐐瑰嚮鐨勬棩鏈熷凡鍦ㄦ暟缁勪腑锛屽垯杩涜绉婚櫎鎿嶄綔锛屼篃灏辨槸杈惧埌鍙嶉�夌殑鏁堟灉
+ const itemIndex = selected.findIndex(item => item === date)
+ selected.splice(itemIndex, 1)
+ } else {
+ // 濡傛灉鐐瑰嚮鐨勬棩鏈熶笉鍦ㄦ暟缁勪腑锛屼笖宸叉湁鐨勯暱搴﹀皬浜庢�诲彲閫夐暱搴︽椂锛屽垯娣诲姞鍒版暟缁勪腑鍘�
+ if (selected.length < this.maxCount) selected.push(date)
+ }
+ } else {
+ // 閫夋嫨鍖洪棿褰㈠紡
+ if (selected.length === 0 || selected.length >= 2) {
+ // 濡傛灉鍘熸潵灏变负0鎴栬�呭ぇ浜�2鐨勯暱搴︼紝鍒欏綋鍓嶇偣鍑荤殑鏃ユ湡锛屽氨鏄紑濮嬫棩鏈�
+ selected = [date]
+ } else if (selected.length === 1) {
+ // 濡傛灉宸茬粡閫夋嫨浜嗗紑濮嬫棩鏈�
+ const existsDate = selected[0]
+ // 濡傛灉褰撳墠閫夋嫨鐨勬棩鏈熷皬浜庝笂涓�娆￠�夋嫨鐨勬棩鏈燂紝鍒欏綋鍓嶇殑鏃ユ湡瀹氫负寮�濮嬫棩鏈�
+ if (dayjs(date).isBefore(existsDate)) {
+ selected = [date]
+ } else if (dayjs(date).isAfter(existsDate)) {
+ // 褰撳墠鏃ユ湡鍑忓幓鏈�澶у彲閫夌殑鏃ユ湡澶╂暟锛屽鏋滃ぇ浜庤捣濮嬫椂闂达紝鍒欒繘琛屾彁绀�
+ if(dayjs(dayjs(date).subtract(this.maxRange, 'day')).isAfter(dayjs(selected[0])) && this.showRangePrompt) {
+ if(this.rangePrompt) {
+ uni.$u.toast(this.rangePrompt)
+ } else {
+ uni.$u.toast(`閫夋嫨澶╂暟涓嶈兘瓒呰繃 ${this.maxRange} 澶ー)
+ }
+ return
+ }
+ // 濡傛灉褰撳墠鏃ユ湡澶т簬宸叉湁鏃ユ湡锛屽皢褰撳墠鐨勬坊鍔犲埌鏁扮粍灏鹃儴
+ selected.push(date)
+ const startDate = selected[0]
+ const endDate = selected[1]
+ const arr = []
+ let i = 0
+ do {
+ // 灏嗗紑濮嬪拰缁撴潫鏃ユ湡涔嬮棿鐨勬棩鏈熸坊鍔犲埌鏁扮粍涓�
+ arr.push(dayjs(startDate).add(i, 'day').format("YYYY-MM-DD"))
+ i++
+ // 绱姞鐨勬棩鏈熷皬浜庣粨鏉熸棩鏈熸椂锛岀户缁笅涓�娆＄殑寰幆
+ } while (dayjs(startDate).add(i, 'day').isBefore(dayjs(endDate)))
+ // 涓轰簡涓�娆℃�т慨鏀规暟缁勶紝閬垮厤computed涓娆¤Е鍙戯紝杩欓噷鎵嶇敤arr鍙橀噺涓�娆℃�ц祴鍊肩殑鏂瑰紡锛屽悓鏃跺皢鏈�鍚庝竴涓棩鏈熸坊鍔犺繎鏉�
+ arr.push(endDate)
+ selected = arr
+ } else {
+ // 閫夋嫨鍖洪棿鏃讹紝鍙湁涓�涓棩鏈熺殑鎯呭喌涓嬶紝涓斾笉鍏佽閫夋嫨璧锋涓哄悓涓�澶╃殑璇濓紝涓嶅厑璁搁�夋嫨鑷繁
+ if (selected[0] === date && !this.allowSameDay) return
+ selected.push(date)
+ }
+ }
+ }
+ this.setSelected(selected)
+ },
+ // 璁剧疆榛樿鏃ユ湡
+ setDefaultDate() {
+ if (!this.defaultDate) {
+ // 濡傛灉娌℃湁璁剧疆榛樿鏃ユ湡锛屽垯灏嗗綋澶╂棩鏈熻缃负榛樿閫変腑鐨勬棩鏈�
+ const selected = [dayjs().format("YYYY-MM-DD")]
+ return this.setSelected(selected, false)
+ }
+ let defaultDate = []
+ const minDate = this.minDate || dayjs().format("YYYY-MM-DD")
+ const maxDate = this.maxDate || dayjs(minDate).add(this.maxMonth - 1, 'month').format("YYYY-MM-DD")
+ if (this.mode === 'single') {
+ // 鍗曢�夋ā寮忥紝鍙互鏄瓧绗︿覆鎴栨暟缁勶紝Date瀵硅薄绛�
+ if (!uni.$u.test.array(this.defaultDate)) {
+ defaultDate = [dayjs(this.defaultDate).format("YYYY-MM-DD")]
+ } else {
+ defaultDate = [this.defaultDate[0]]
+ }
+ } else {
+ // 濡傛灉涓洪潪鏁扮粍锛屽垯涓嶆墽琛�
+ if (!uni.$u.test.array(this.defaultDate)) return
+ defaultDate = this.defaultDate
+ }
+ // 杩囨护鐢ㄦ埛浼犻�掔殑榛樿鏁扮粍锛屽彇鍑哄彧鍦ㄥ彲鍏佽鏈�澶у�间笌鏈�灏忓�间箣闂寸殑鍏冪礌
+ defaultDate = defaultDate.filter(item => {
+ return dayjs(item).isAfter(dayjs(minDate).subtract(1, 'day')) && dayjs(item).isBefore(dayjs(
+ maxDate).add(1, 'day'))
+ })
+ this.setSelected(defaultDate, false)
+ },
+ setSelected(selected, event = true) {
+ this.selected = selected
+ event && this.$emit('monthSelected', this.selected)
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+
+ .u-calendar-month-wrapper {
+ margin-top: 4px;
+ }
+
+ .u-calendar-month {
+
+ &__title {
+ font-size: 14px;
+ line-height: 42px;
+ height: 42px;
+ color: $u-main-color;
+ text-align: center;
+ font-weight: bold;
+ }
+
+ &__days {
+ position: relative;
+ @include flex;
+ flex-wrap: wrap;
+
+ &__month-mark-wrapper {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ @include flex;
+ justify-content: center;
+ align-items: center;
+
+ &__text {
+ font-size: 155px;
+ color: rgba(231, 232, 234, 0.83);
+ }
+ }
+
+ &__day {
+ @include flex;
+ padding: 2px;
+ /* #ifndef APP-NVUE */
+ // vue涓嬩娇鐢╟ss杩涜瀹藉害璁＄畻锛屽洜涓烘煇浜涘畨鍗撴満浼氭棤娉曡繘琛宩s鑾峰彇鐖跺厓绱犲搴﹁繘琛岃绠楀緱鍑猴紝浼氭湁鍋忕Щ
+ width: calc(100% / 7);
+ box-sizing: border-box;
+ /* #endif */
+
+ &__select {
+ flex: 1;
+ @include flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+
+ &__dot {
+ width: 7px;
+ height: 7px;
+ border-radius: 100px;
+ background-color: $u-error;
+ position: absolute;
+ top: 12px;
+ right: 7px;
+ }
+
+ &__buttom-info {
+ color: $u-content-color;
+ text-align: center;
+ position: absolute;
+ bottom: 5px;
+ font-size: 10px;
+ text-align: center;
+ left: 0;
+ right: 0;
+
+ &--selected {
+ color: #ffffff;
+ }
+
+ &--disabled {
+ color: #cacbcd;
+ }
+ }
+
+ &__info {
+ text-align: center;
+ font-size: 16px;
+
+ &--selected {
+ color: #ffffff;
+ }
+
+ &--disabled {
+ color: #cacbcd;
+ }
+ }
+
+ &--selected {
+ background-color: $u-primary;
+ @include flex;
+ justify-content: center;
+ align-items: center;
+ flex: 1;
+ border-radius: 3px;
+ }
+
+ &--range-selected {
+ opacity: 0.3;
+ border-radius: 0;
+ }
+
+ &--range-start-selected {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ &--range-end-selected {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ }
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.3