leiyun
/
ai_uniapp_v2
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
10 Commits
1 Branch
4.2 MiB
 
 
 
Struktur: 6d51b40f11
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „6d51b40f11“
${ noResults }
ai_uniapp_v2/uni_modules/uview-plus/components/u-calendar/month.vue

664 Zeilen
22 KiB
Originalformat Blame Verlauf 

  1. <template>

  2. 	<view class="u-calendar-month-wrapper" ref="u-calendar-month-wrapper">

  3. 		<view v-for="(item, index) in months" :key="index" :class="[`u-calendar-month-${index}`]"

  4. 			:ref="`u-calendar-month-${index}`" :id="`month-${index}`">

  5. 			<text v-if="index !== 0" class="u-calendar-month__title">{{ monthTitle(item) }}</text>

  6. 			<view class="u-calendar-month__days">

  7. 				<view v-if="showMark" class="u-calendar-month__days__month-mark-wrapper">

  8. 					<text class="u-calendar-month__days__month-mark-wrapper__text">{{ item.month }}</text>

  9. 				</view>

  10. 				<view class="u-calendar-month__days__day" v-for="(item1, index1) in item.date" :key="index1"

  11. 					:style="[dayStyle(index, index1, item1)]" @tap="clickHandler(index, index1, item1)"

  12. 					:class="[item1.selected && 'u-calendar-month__days__day__select--selected']">

  13. 					<view class="u-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]">

  14. 						<text class="u-calendar-month__days__day__select__info"

  15. 							:class="[(item1.disabled || isForbid(item1) ) ? 'u-calendar-month__days__day__select__info--disabled' : '']"

  16. 							:style="[textStyle(item1)]">{{ item1.day }}</text>

  17. 						<text v-if="getBottomInfo(index, index1, item1)"

  18. 							class="u-calendar-month__days__day__select__buttom-info"

  19. 							:class="[(item1.disabled || isForbid(item1) ) ? 'u-calendar-month__days__day__select__buttom-info--disabled' : '']"

  20. 							:style="[textStyle(item1)]">{{ getBottomInfo(index, index1, item1) }}</text>

  21. 						<text v-if="item1.dot" class="u-calendar-month__days__day__select__dot"></text>

  22. 					</view>

  23. 				</view>

  24. 			</view>

  25. 		</view>

  26. 	</view>

  27. </template>

  28. 

  29. <script>

  30. 	// #ifdef APP-NVUE

  31. 	// 由于nvue不支持百分比单位，需要查询宽度来计算每个日期的宽度

  32. 	const dom = uni.requireNativePlugin('dom')

  33. 	// #endif

  34. 	import { mpMixin } from '../../libs/mixin/mpMixin';

  35. 	import { mixin } from '../../libs/mixin/mixin';

  36. 	import { addUnit, deepClone, toast, sleep, getWindowInfo } from '../../libs/function/index';

  37. 	import { colorGradient } from '../../libs/function/colorGradient';

  38. 	import test from '../../libs/function/test';

  39. 	import defProps from '../../libs/config/props';

  40. 	import dayjs from '../u-datetime-picker/dayjs.esm.min.js';

  41. 	import { t } from '../../libs/i18n'

  42. 	export default {

  43. 		name: 'u-calendar-month',

  44. 		mixins: [mpMixin, mixin],

  45. 		props: {

  46. 			// 是否显示月份背景色

  47. 			showMark: {

  48. 				type: Boolean,

  49. 				default: true

  50. 			},

  51. 			// 主题色，对底部按钮和选中日期有效

  52. 			color: {

  53. 				type: String,

  54. 				default: '#3c9cff'

  55. 			},

  56. 			// 月份数据

  57. 			months: {

  58. 				type: Array,

  59. 				default: () => []

  60. 			},

  61. 			// 日期选择类型

  62. 			mode: {

  63. 				type: String,

  64. 				default: 'single'

  65. 			},

  66. 			// 日期行高

  67. 			rowHeight: {

  68. 				type: [String, Number],

  69. 				default: 58

  70. 			},

  71. 			// mode=multiple时，最多可选多少个日期

  72. 			maxCount: {

  73. 				type: [String, Number],

  74. 				default: Infinity

  75. 			},

  76. 			// mode=range时，第一个日期底部的提示文字

  77. 			startText: {

  78. 				type: String,

  79. 				default: '开始'

  80. 			},

  81. 			// mode=range时，最后一个日期底部的提示文字

  82. 			endText: {

  83. 				type: String,

  84. 				default: '结束'

  85. 			},

  86. 			// 默认选中的日期，mode为multiple或range是必须为数组格式

  87. 			defaultDate: {

  88. 				type: [Array, String, Date],

  89. 				default: null

  90. 			},

  91. 			// 最小的可选日期

  92. 			minDate: {

  93. 				type: [String, Number],

  94. 				default: 0

  95. 			},

  96. 			// 最大可选日期

  97. 			maxDate: {

  98. 				type: [String, Number],

  99. 				default: 0

  100. 			},

  101. 			// 如果没有设置maxDate，则往后推多少个月

  102. 			maxMonth: {

  103. 				type: [String, Number],

  104. 				default: 2

  105. 			},

  106. 			// 是否为只读状态，只读状态下禁止选择日期

  107. 			readonly: {

  108. 				type: Boolean,

  109. 				default: () => defProps.calendar.readonly

  110. 			},

  111. 			// 日期区间最多可选天数，默认无限制，mode = range时有效

  112. 			maxRange: {

  113. 				type: [Number, String],

  114. 				default: Infinity

  115. 			},

  116. 			// 范围选择超过最多可选天数时的提示文案，mode = range时有效

  117. 			rangePrompt: {

  118. 				type: String,

  119. 				default: ''

  120. 			},

  121. 			// 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效

  122. 			showRangePrompt: {

  123. 				type: Boolean,

  124. 				default: true

  125. 			},

  126. 			// 是否允许日期范围的起止时间为同一天，mode = range时有效

  127. 			allowSameDay: {

  128. 				type: Boolean,

  129. 				default: false

  130. 			},

  131. 			forbidDays: {

  132. 				type: Array,

  133. 				default: () => []

  134. 			},

  135. 			forbidDaysToast: {

  136. 				type: String,

  137. 				default: ''

  138. 			},

  139. 			// 今天日期，用于独立高亮

  140. 			todayDate: {

  141. 				type: String,

  142. 				default: ''

  143. 			},

  144. 			// 今天日期的独立高亮颜色

  145. 			todayColor: {

  146. 				type: String,

  147. 				default: ''

  148. 			}

  149. 		},

  150. 		data() {

  151. 			return {

  152. 				// 每个日期的宽度

  153. 				width: 0,

  154. 				// 当前选中的日期item

  155. 				item: {},

  156. 				selected: []

  157. 			}

  158. 		},

  159. 		watch: {

  160. 			selectedChange: {

  161. 				immediate: true,

  162. 				handler(n) {

  163. 					this.setDefaultDate()

  164. 				}

  165. 			}

  166. 		},

  167. 		computed: {

  168. 			// 多个条件的变化，会引起选中日期的变化，这里统一管理监听

  169. 			selectedChange() {

  170. 				return [this.minDate, this.maxDate, this.defaultDate]

  171. 			},

  172. 			dayStyle(index1, index2, item) {

  173. 				return (index1, index2, item) => {

  174. 					const style = {}

  175. 					let week = item.week

  176. 					// 隐藏挂载场景下节点宽度可能拿到0，兜底使用窗口宽度避免首日偏移归零

  177. 					const wrapperWidth = this.width > 0 ? this.width : (getWindowInfo().windowWidth || 0)

  178. 					// 不进行四舍五入的形式保留2位小数

  179. 					const dayWidth = Number(parseFloat(wrapperWidth / 7).toFixed(3).slice(0, -1))

  180. 					// 得出每个日期的宽度

  181. 					// #ifdef APP-NVUE

  182. 					style.width = addUnit(dayWidth, 'px')

  183. 					// #endif

  184. 					style.height = addUnit(this.rowHeight, 'px')

  185. 					if (index2 === 0) {

  186. 						// 获取当前为星期几，如果为0，则为星期天，减一为每月第一天时，需要向左偏移的item个数

  187. 						week = (week === 0 ? 7 : week) - 1

  188. 						// #ifdef APP-NVUE

  189. 						style.marginLeft = addUnit(week * dayWidth, 'px')

  190. 						// #endif

  191. 						// #ifndef APP-NVUE

  192. 						style.marginLeft = `${(week / 7) * 100}%`

  193. 						// #endif

  194. 					}

  195. 					if (this.mode === 'range') {

  196. 						// 之所以需要这么写，是因为DCloud公司的iOS客户端导致的bug

  197. 						style.paddingLeft = 0

  198. 						style.paddingRight = 0

  199. 						style.paddingBottom = 0

  200. 						style.paddingTop = 0

  201. 					}

  202. 					return style

  203. 				}

  204. 			},

  205. 			daySelectStyle() {

  206. 				return (index1, index2, item) => {

  207. 					let date = dayjs(item.date).format("YYYY-MM-DD"),

  208. 						style = {}

  209. 					// 判断date是否在selected数组中，因为月份可能会需要补0，所以使用dateSame判断，而不用数组的includes判断

  210. 					if (this.selected.some(item => this.dateSame(item, date))) {

  211. 						style.backgroundColor = this.color

  212. 					}

  213. 					if (this.todayDate && this.dateSame(date, this.todayDate)) {

  214. 						style.border = `1px solid ${this.resolvedTodayColor}`

  215. 						style.boxSizing = 'border-box'

  216. 					}

  217. 					if (this.mode === 'single') {

  218. 						if (date === this.selected[0]) {

  219. 							// 因为需要对nvue的兼容，只能这么写，无法缩写，也无法通过类名控制等等

  220. 							style.borderTopLeftRadius = '3px'

  221. 							style.borderBottomLeftRadius = '3px'

  222. 							style.borderTopRightRadius = '3px'

  223. 							style.borderBottomRightRadius = '3px'

  224. 						}

  225. 					} else if (this.mode === 'range') {

  226. 						if (this.selected.length >= 2) {

  227. 							const len = this.selected.length - 1

  228. 							// 第一个日期设置左上角和左下角的圆角

  229. 							if (this.dateSame(date, this.selected[0])) {

  230. 								style.borderTopLeftRadius = '3px'

  231. 								style.borderBottomLeftRadius = '3px'

  232. 							}

  233. 							// 最后一个日期设置右上角和右下角的圆角

  234. 							if (this.dateSame(date, this.selected[len])) {

  235. 								style.borderTopRightRadius = '3px'

  236. 								style.borderBottomRightRadius = '3px'

  237. 							}

  238. 							// 处于第一和最后一个之间的日期，背景色设置为浅色，通过将对应颜色进行等分，再取其尾部的颜色值

  239. 							if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this

  240. 									.selected[len]))) {

  241. 								const rangeEndColor = this.upThemeVar('--up-card-bg-color', this.upThemeIsDark ? '#1c1c1e' : '#ffffff')

  242. 								style.backgroundColor = colorGradient(this.color, rangeEndColor, 100)[90]

  243. 								// 增加一个透明度，让范围区间的背景色也能看到底部的mark水印字符

  244. 								style.opacity = this.upThemeIsDark ? 0.85 : 0.7

  245. 							}

  246. 						} else if (this.selected.length === 1) {

  247. 							// 之所以需要这么写，是因为uni-app的iOS客户端的bug

  248. 							// 进行还原操作，否则在nvue的iOS，uni-app有bug，会导致诡异的表现

  249. 							style.borderTopLeftRadius = '3px'

  250. 							style.borderBottomLeftRadius = '3px'

  251. 						}

  252. 					} else {

  253. 						if (this.selected.some(item => this.dateSame(item, date))) {

  254. 							style.borderTopLeftRadius = '3px'

  255. 							style.borderBottomLeftRadius = '3px'

  256. 							style.borderTopRightRadius = '3px'

  257. 							style.borderBottomRightRadius = '3px'

  258. 						}

  259. 					}

  260. 					return style

  261. 				}

  262. 			},

  263. 			resolvedTodayColor() {

  264. 				return this.todayColor || this.color

  265. 			},

  266. 			// 某个日期是否被选中

  267. 			textStyle() {

  268. 				return (item) => {

  269. 					const date = dayjs(item.date).format("YYYY-MM-DD"),

  270. 						style = {}

  271. 					// 选中的日期，提示文字设置白色

  272. 					if (this.selected.some(item => this.dateSame(item, date))) {

  273. 						style.color = '#ffffff'

  274. 					}

  275. 					if (this.mode === 'range') {

  276. 						const len = this.selected.length - 1

  277. 						// 如果是范围选择模式，第一个和最后一个之间的日期，文字颜色设置为高亮的主题色

  278. 						if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this

  279. 								.selected[len]))) {

  280. 							style.color = this.color

  281. 						}

  282. 					}

  283. 					if (this.todayDate && this.dateSame(date, this.todayDate) && !this.isSelectedDate(date)) {

  284. 						style.color = this.resolvedTodayColor

  285. 					}

  286. 					return style

  287. 				}

  288. 			},

  289. 			// 获取底部的提示文字

  290. 			getBottomInfo() {

  291. 				return (index1, index2, item) => {

  292. 					const date = dayjs(item.date).format("YYYY-MM-DD")

  293. 					const bottomInfo = item.bottomInfo

  294. 					// 当为日期范围模式时，且选择的日期个数大于0时

  295. 					if (this.mode === 'range' && this.selected.length > 0) {

  296. 						if (this.selected.length === 1) {

  297. 							// 选择了一个日期时，如果当前日期为数组中的第一个日期，则显示底部文字为“开始”

  298. 							if (this.dateSame(date, this.selected[0])) return this.startText

  299. 							else return bottomInfo

  300. 						} else {

  301. 							const len = this.selected.length - 1

  302. 							// 如果数组中的日期大于2个时，第一个和最后一个显示为开始和结束日期

  303. 							if (this.dateSame(date, this.selected[0]) && this.dateSame(date, this.selected[1]) &&

  304. 								len === 1) {

  305. 								// 如果长度为2，且第一个等于第二个日期，则提示语放在同一个item中

  306. 								return `${this.startText}/${this.endText}`

  307. 							} else if (this.dateSame(date, this.selected[0])) {

  308. 								return this.startText

  309. 							} else if (this.dateSame(date, this.selected[len])) {

  310. 								return this.endText

  311. 							} else {

  312. 								return bottomInfo

  313. 							}

  314. 						}

  315. 					} else {

  316. 						return bottomInfo

  317. 					}

  318. 				}

  319. 			}

  320. 		},

  321. 		mounted() {

  322. 			this.init()

  323. 		},

  324. 		emits: ['monthSelected', 'updateMonthTop'],

  325. 		methods: {

  326. 			init() {

  327. 				// 初始化默认选中

  328. 				this.$emit('monthSelected', this.selected)

  329. 				this.$nextTick(() => {

  330. 					// 这里需要另一个延时，因为获取宽度后，会进行月份数据渲染，只有渲染完成之后，才有真正的高度

  331. 					// 因为nvue下，$nextTick并不是100%可靠的

  332. 					sleep(10).then(() => {

  333. 						this.getWrapperWidth()

  334. 						this.getMonthRect()

  335. 					})

  336. 				})

  337. 			},

  338. 			monthTitle(item) {

  339. 				if (uni.getLocale() == 'zh-Hans' || uni.getLocale() == 'zh-Hant') {

  340. 					return item.year + '年' + (item.month < 10 ? '0' + item.month : item.month) + '月'

  341. 				} else {

  342. 					return (item.month < 10 ? '0' + item.month : item.month) + '/' + item.year

  343. 				}

  344. 			},

  345. 			isForbid(item) {

  346. 				let date = dayjs(item.date).format("YYYY-MM-DD")

  347. 				if (this.mode !== 'range' && this.forbidDays.includes(date)) {

  348. 					return true

  349. 				}

  350. 				return false

  351. 			},

  352. 			// 判断两个日期是否相等

  353. 			dateSame(date1, date2) {

  354. 				return dayjs(date1).isSame(dayjs(date2))

  355. 			},

  356. 			isSelectedDate(date) {

  357. 				return this.selected.some(item => this.dateSame(item, date))

  358. 			},

  359. 			// 获取月份数据区域的宽度，因为nvue不支持百分比，所以无法通过css设置每个日期item的宽度

  360. 			getWrapperWidth() {

  361. 				// #ifdef APP-NVUE

  362. 				dom.getComponentRect(this.$refs['u-calendar-month-wrapper'], res => {

  363. 					const width = res && res.size ? Number(res.size.width) : 0

  364. 					this.width = width > 0 ? width : (getWindowInfo().windowWidth || 0)

  365. 				})

  366. 				// #endif

  367. 				// #ifndef APP-NVUE

  368. 				this.$uGetRect('.u-calendar-month-wrapper').then(size => {

  369. 					const width = size ? Number(size.width) : 0

  370. 					this.width = width > 0 ? width : (getWindowInfo().windowWidth || 0)

  371. 				})

  372. 				// #endif

  373. 			},

  374. 			getMonthRect() {

  375. 				// 获取每个月份数据的尺寸，用于父组件在scroll-view滚动事件中，监听当前滚动到了第几个月份

  376. 				const promiseAllArr = this.months.map((item, index) => this.getMonthRectByPromise(

  377. 					`u-calendar-month-${index}`))

  378. 				// 一次性返回

  379. 				Promise.all(promiseAllArr).then(

  380. 					sizes => {

  381. 						let height = 1

  382. 						const topArr = []

  383. 						for (let i = 0; i < this.months.length; i++) {

  384. 							// 添加到months数组中，供scroll-view滚动事件中，判断当前滚动到哪个月份

  385. 							topArr[i] = height

  386. 							height += sizes[i].height

  387. 						}

  388. 						// 由于微信下，无法通过this.months[i].top的形式(引用类型)去修改父组件的month的top值，所以使用事件形式对外发出

  389. 						this.$emit('updateMonthTop', topArr)

  390. 					})

  391. 			},

  392. 			// 获取每个月份区域的尺寸

  393. 			getMonthRectByPromise(el) {

  394. 				// #ifndef APP-NVUE

  395. 				// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://uview-plus.jiangruyi.com/js/getRect.html

  396. 				// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同

  397. 				return new Promise(resolve => {

  398. 					this.$uGetRect(`.${el}`).then(size => {

  399. 						resolve(size)

  400. 					})

  401. 				})

  402. 				// #endif

  403. 

  404. 				// #ifdef APP-NVUE

  405. 				// nvue下，使用dom模块查询元素高度

  406. 				// 返回一个promise，让调用此方法的主体能使用then回调

  407. 				return new Promise(resolve => {

  408. 					dom.getComponentRect(this.$refs[el][0], res => {

  409. 						resolve(res.size)

  410. 					})

  411. 				})

  412. 				// #endif

  413. 			},

  414. 			// 点击某一个日期

  415. 			clickHandler(index1, index2, item) {

  416. 				if (this.readonly) {

  417. 					return;

  418. 				}

  419. 				this.item = item

  420. 				const date = dayjs(item.date).format("YYYY-MM-DD")

  421. 				if (item.disabled) return

  422. 				if (this.isForbid(item)) {

  423. 					uni.showToast({

  424. 						title: this.forbidDaysToast

  425. 					})

  426. 					return

  427. 				}

  428. 				// 对上一次选择的日期数组进行深度克隆

  429. 				let selected = deepClone(this.selected)

  430. 				if (this.mode === 'single') {

  431. 					// 单选情况下，让数组中的元素为当前点击的日期

  432. 					selected = [date]

  433. 				} else if (this.mode === 'multiple') {

  434. 					if (selected.some(item => this.dateSame(item, date))) {

  435. 						// 如果点击的日期已在数组中，则进行移除操作，也就是达到反选的效果

  436. 						const itemIndex = selected.findIndex(item => item === date)

  437. 						selected.splice(itemIndex, 1)

  438. 					} else {

  439. 						// 如果点击的日期不在数组中，且已有的长度小于总可选长度时，则添加到数组中去

  440. 						if (selected.length < this.maxCount) selected.push(date)

  441. 					}

  442. 				} else {

  443. 					// 选择区间形式

  444. 					if (selected.length === 0 || selected.length >= 2) {

  445. 						// 如果原来就为0或者大于2的长度，则当前点击的日期，就是开始日期

  446. 						selected = [date]

  447. 					} else if (selected.length === 1) {

  448. 						// 如果已经选择了开始日期

  449. 						const existsDate = selected[0]

  450. 						// 如果当前选择的日期小于上一次选择的日期，则当前的日期定为开始日期

  451. 						if (dayjs(date).isBefore(existsDate)) {

  452. 							selected = [date]

  453. 						} else if (dayjs(date).isAfter(existsDate)) {

  454. 							// 当前日期减去最大可选的日期天数，如果大于起始时间，则进行提示

  455. 							if(dayjs(dayjs(date).subtract(this.maxRange, 'day')).isAfter(dayjs(selected[0])) && this.showRangePrompt) {

  456. 								if(this.rangePrompt) {

  457. 									toast(this.rangePrompt)

  458. 								} else {

  459. 									toast(t("up.calendar.daysExceed", { days: this.maxRange }))

  460. 								}

  461. 								return

  462. 							}

  463. 							// 如果当前日期大于已有日期，将当前的添加到数组尾部

  464. 							selected.push(date)

  465. 							const startDate = selected[0]

  466. 							const endDate = selected[1]

  467. 							const arr = []

  468. 							let i = 0

  469. 							do {

  470. 								// 将开始和结束日期之间的日期添加到数组中

  471. 								arr.push(dayjs(startDate).add(i, 'day').format("YYYY-MM-DD"))

  472. 								i++

  473. 								// 累加的日期小于结束日期时，继续下一次的循环

  474. 							} while (dayjs(startDate).add(i, 'day').isBefore(dayjs(endDate)))

  475. 							// 为了一次性修改数组，避免computed中多次触发，这里才用arr变量一次性赋值的方式，同时将最后一个日期添加近来

  476. 							arr.push(endDate)

  477. 							selected = arr

  478. 						} else {

  479. 							// 选择区间时，只有一个日期的情况下，且不允许选择起止为同一天的话，不允许选择自己

  480. 							if (selected[0] === date && !this.allowSameDay) return

  481. 							selected.push(date)

  482. 						}

  483. 					}

  484. 				}

  485. 				this.setSelected(selected)

  486. 			},

  487. 			// 设置默认日期

  488. 			setDefaultDate() {

  489. 				if (!this.defaultDate) {

  490. 					// 如果没有设置默认日期，则将当天日期设置为默认选中的日期

  491. 					const selected = [dayjs().format("YYYY-MM-DD")]

  492. 					return this.setSelected(selected, false)

  493. 				}

  494. 				let defaultDate = []

  495. 				const minDate = this.minDate || dayjs().format("YYYY-MM-DD")

  496. 				const maxDate = this.maxDate || dayjs(minDate).add(this.maxMonth - 1, 'month').format("YYYY-MM-DD")

  497. 				if (this.mode === 'single') {

  498. 					// 单选模式，可以是字符串或数组，Date对象等

  499. 					if (!test.array(this.defaultDate)) {

  500. 						defaultDate = [dayjs(this.defaultDate).format("YYYY-MM-DD")]

  501. 					} else {

  502. 						defaultDate = [this.defaultDate[0]]

  503. 					}

  504. 				} else {

  505. 					// 如果为非数组，则不执行

  506. 					if (!test.array(this.defaultDate)) return

  507. 					defaultDate = this.defaultDate

  508. 				}

  509. 				// 过滤用户传递的默认数组，取出只在可允许最大值与最小值之间的元素

  510. 				defaultDate = defaultDate.filter(item => {

  511. 					return dayjs(item).isAfter(dayjs(minDate).subtract(1, 'day')) && dayjs(item).isBefore(dayjs(

  512. 						maxDate).add(1, 'day'))

  513. 				})

  514. 				this.setSelected(defaultDate, false)

  515. 			},

  516. 			setSelected(selected, event = true) {

  517. 				this.selected = selected

  518. 				event && this.$emit('monthSelected', this.selected,'tap')

  519. 			},

  520. 			selectDate(date) {

  521. 				const targetDate = dayjs(date).format("YYYY-MM-DD")

  522. 				for (let monthIndex = 0; monthIndex < this.months.length; monthIndex++) {

  523. 					const dayIndex = this.months[monthIndex].date.findIndex(item => {

  524. 						return this.dateSame(item.date, targetDate)

  525. 					})

  526. 					if (dayIndex !== -1) {

  527. 						this.clickHandler(monthIndex, dayIndex, this.months[monthIndex].date[dayIndex])

  528. 						return

  529. 					}

  530. 				}

  531. 			}

  532. 		}

  533. 	}

  534. </script>

  535. 

  536. <style lang="scss" scoped>

  537. 

  538. 	.u-calendar-month-wrapper {

  539. 		margin-top: 4px;

  540. 	}

  541. 

  542. 	.u-calendar-month {

  543. 

  544. 		&__title {

  545. 			display: flex;

  546. 			flex-direction: column;

  547. 			font-size: 14px;

  548. 			line-height: 42px;

  549. 			height: 42px;

  550. 			color: var(--up-main-color, $u-main-color);

  551. 			text-align: center;

  552. 			font-weight: bold;

  553. 		}

  554. 

  555. 		&__days {

  556. 			position: relative;

  557. 			@include flex;

  558. 			flex-wrap: wrap;

  559. 

  560. 			&__month-mark-wrapper {

  561. 				position: absolute;

  562. 				top: 0;

  563. 				bottom: 0;

  564. 				left: 0;

  565. 				right: 0;

  566. 				@include flex;

  567. 				justify-content: center;

  568. 				align-items: center;

  569. 

  570. 				&__text {

  571. 					font-size: 155px;

  572. 					color: var(--up-calendar-month-mark-color, rgba(231, 232, 234, 0.83));

  573. 				}

  574. 			}

  575. 

  576. 			&__day {

  577. 				@include flex;

  578. 				padding: 2px;

  579. 				/* #ifndef APP-NVUE */

  580. 				// vue下使用css进行宽度计算，因为某些安卓机会无法进行js获取父元素宽度进行计算得出，会有偏移

  581. 				width: calc(100% / 7);

  582. 				box-sizing: border-box;

  583. 				/* #endif */

  584. 

  585. 				&__select {

  586. 					flex: 1;

  587. 					@include flex;

  588. 					align-items: center;

  589. 					justify-content: center;

  590. 					position: relative;

  591. 

  592. 					&__dot {

  593. 						width: 7px;

  594. 						height: 7px;

  595. 						border-radius: 100px;

  596. 						background-color: $u-error;

  597. 						position: absolute;

  598. 						top: 12px;

  599. 						right: 7px;

  600. 					}

  601. 

  602. 					&__buttom-info {

  603. 						color: var(--up-content-color, $u-content-color);

  604. 						text-align: center;

  605. 						position: absolute;

  606. 						bottom: 5px;

  607. 						font-size: 10px;

  608. 						text-align: center;

  609. 						left: 0;

  610. 						right: 0;

  611. 

  612. 						&--selected {

  613. 							color: #ffffff;

  614. 						}

  615. 

  616. 						&--disabled {

  617. 							color: var(--up-disabled-color, #cacbcd);

  618. 						}

  619. 					}

  620. 

  621. 					&__info {

  622. 						text-align: center;

  623. 						font-size: 16px;

  624. 						color: var(--up-main-color, $u-main-color);

  625. 

  626. 						&--selected {

  627. 							color: #ffffff;

  628. 						}

  629. 

  630. 						&--disabled {

  631. 							color: var(--up-disabled-color, #cacbcd);

  632. 						}

  633. 					}

  634. 

  635. 					&--selected {

  636. 						background-color: $u-primary;

  637. 						@include flex;

  638. 						justify-content: center;

  639. 						align-items: center;

  640. 						flex: 1;

  641. 						border-radius: 3px;

  642. 					}

  643. 

  644. 					&--range-selected {

  645. 						opacity: 0.3;

  646. 						border-radius: 0;

  647. 					}

  648. 

  649. 					&--range-start-selected {

  650. 						border-top-right-radius: 0;

  651. 						border-bottom-right-radius: 0;

  652. 					}

  653. 

  654. 					&--range-end-selected {

  655. 						border-top-left-radius: 0;

  656. 						border-bottom-left-radius: 0;

  657. 					}

  658. 				}

  659. 			}

  660. 		}

  661. 	}

  662. 

  663. </style>