1、ant-design-vue3.x中文配置
默認情況下ant-design-vue3.x時英文文案硕噩，而我們經(jīng)常需要使用中文文案统阿。在App.vue中添加中文相關(guān)全局配置绩社，代碼如下所示：
<script setup>
import {ref} from 'vue';
import layout from "./views/Layout.vue";
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs'; //日期時間組件API
import 'dayjs/locale/zh-cn'; //
dayjs.locale('zh-cn'); //日期時間組件中文
const pageMaskShow = ref(false);
const locale = ref(zhCN); //中文
</script>
<template>
<a-config-provider :locale="locale"> <!-- 全局配置，中文 -->
<a-spin size="large" :spinning="pageMaskShow" tip="處理中腋舌，請稍后...">
<layout></layout>
</a-spin>
</a-config-provider>
</template>
<style scoped>
.ant-spin-nested-loading {
height: 100%;
}
:deep(.ant-spin-container) {
height: 100%;
}
</style>
2盏触、Form示例
關(guān)鍵代碼在在文件注釋中說明：
<script setup name="Welcome">
import dayjs from 'dayjs'; //日期時間API
import {reactive} from "vue";
import axios from 'axios'; //ajax相關(guān)API
//創(chuàng)建與form綁定的數(shù)據(jù)對象
const formState = reactive({
username: '',
password: '',
remember: true,
nowTime: dayjs('2022-07-28 13:01:01', 'YYYY-MM-DD HH:mm:ss') //為date picker組件賦初值
});
//表單提交時完成表單數(shù)據(jù)驗證且成功時調(diào)用的函數(shù)
const onFinish = values => {
//日期時間字段提交前，需要將數(shù)據(jù)轉(zhuǎn)化為后端服務(wù)要求的字符串類型的格式化數(shù)據(jù)后再提交
values.nowTime = values.nowTime.format("YYYY-MM-DD HH:mm:ss");
axios.post("/api/hellodemo/sayHello.do", values).then(resp => {
console.log("ajax success", resp);
}).catch(err => {
console.log("ajax error", err);
});
console.log('Success:', values);
};
//表單提交時完成表單數(shù)據(jù)驗證且失敗時調(diào)用的函數(shù)
const onFinishFailed = errorInfo => {
console.log('Failed:', errorInfo);
};
</script>
<template>
<div>
<h1>系統(tǒng)首頁</h1>
<hr>
<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 8 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
<a-form-item label="用戶名" name="username" :rules="[{ required: true, message: '請輸入用戶名！' }]">
<a-input v-model:value="formState.username" /> <!-- v-model:value赞辩，與數(shù)據(jù)對象的username屬性綁定 -->
</a-form-item>
<a-form-item label="密碼" name="password" :rules="[{ required: true, message: '請輸入用戶名雌芽！' }]">
<a-input-password v-model:value="formState.password" />
</a-form-item>
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 8 }">
<a-checkbox v-model:checked="formState.remember">記住我</a-checkbox>
</a-form-item>
<a-form-item label="登錄時間" name="nowTime" :rules="[{ required: true, message: '請選擇登錄時間！' }]">
<a-date-picker show-time v-model:value="formState.nowTime" />
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit">提交</a-button>
</a-form-item>
</a-form>
</div>
</template>
<style scoped>
h1 {
text-align: center;
color: red;
}
.ant-picker {
width: 100%;
}
</style>
``
請忽略這里的登錄時間字段的業(yè)務(wù)含義辨嗽，本例的意圖是想說明兩個問題：
1世落、如何給date picker組件賦初值；
2糟需、提交表單數(shù)據(jù)前屉佳，需要將提交數(shù)據(jù)對象的日期時間類型數(shù)據(jù)轉(zhuǎn)換為后端服務(wù)要求的格式化數(shù)據(jù)后提交。