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}

效果：