Vue3组件使用问题

Vue3组件学习

一、Message 全局提示组件返回数据换行问题

问题：使用中发现仅仅通过写入'\n'或'<br/>'，无法实现回车显示的结果。
解决：
可以通过增加内联样式：whiteSpace: 'pre-wrap'解决。
代码：

				let errorInfo = ''
				info.file.response.data.forEach((item) => {
					errorInfo = errorInfo + '[' + item.projectName + ']' + item.errorMsg + '\n'
				})
				message.error({
					content: errorInfo,
					style: {
						whiteSpace: 'pre-wrap'
					}
				})

二、DatePicker 日期选择框组件限制选定年份问题

问题：在使用中，遇到了如下需求：一个选择了某一年的某一个月份，另一个选择只能选择本年份的其他月份。
解决：
通过对选择的数据进行格式化分析，返回对应的disabled数据
代码：

							<a-range-picker
								:format="['YYYY-MM', 'YYYY-MM']"
								style="width: 250px; margin-left: 20px"
								:disabled-date="disabledDate"
								v-model:value="timeValue"
								picker="month"
								@change="timeValueSelect"
								@calendarChange="onCalendarChange"
							/>

方法：

	const timeValue = ref()
	//重点、难点
	const disabledDate = (current) => {
		if (!dates.value || dates.value.length === 0) {
			return false
		} else {
			if (dates.value[0]) {
				if (new Date(dates.value[0]).toString().split(' ')[3] != new Date(current).toString().split(' ')[3]) {
					return true
				} else {
					return false
				}
			} else {
				if (new Date(dates.value[1]).toString().split(' ')[3] != new Date(current).toString().split(' ')[3]) {
					return true
				} else {
					return false
				}
			}
		}
	}
	const timeValueSelect = (value, value1) => {
		timeValues.value = value1
		//搜索方法...
		//getData()
	}
	const dates = ref()
	const onCalendarChange = (open, open1) => {
		dates.value = open
	}

效果：