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}

效果：