fix: configure Element Plus Chinese locale (zh-cn)
Add zh-cn locale to Element Plus globally via app.use() and el-config-provider wrapper, and apply :locale prop to all el-date-picker components in dialogs to ensure correct Chinese display in date pickers, calendars, and other locale-aware UI. Made-with: Cursor
This commit is contained in:
@@ -6,6 +6,7 @@ import { useCategoryStore } from '@/stores/useCategoryStore'
|
||||
import { useTagStore } from '@/stores/useTagStore'
|
||||
import { useUIStore } from '@/stores/useUIStore'
|
||||
import { useUserSettingsStore } from '@/stores/useUserSettingsStore'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
import AppHeader from '@/components/AppHeader.vue'
|
||||
import TaskDialog from '@/components/TaskDialog.vue'
|
||||
import CategoryDialog from '@/components/CategoryDialog.vue'
|
||||
@@ -60,6 +61,7 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-config-provider :locale="zhCn">
|
||||
<div class="app-container">
|
||||
<div class="decoration-star" style="top: 20%; right: 8%; animation-delay: 0.5s;"></div>
|
||||
<div class="decoration-star" style="top: 60%; left: 3%; animation-delay: 1s;"></div>
|
||||
@@ -97,6 +99,7 @@ onMounted(async () => {
|
||||
<TaskDialog />
|
||||
<CategoryDialog />
|
||||
</div>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -3,6 +3,7 @@ import { ref, computed, watch } from 'vue'
|
||||
import { useAnniversaryStore } from '@/stores/useAnniversaryStore'
|
||||
import type { Anniversary } from '@/api/types'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
|
||||
interface Props {
|
||||
visible: boolean
|
||||
@@ -119,6 +120,7 @@ function handleClose() {
|
||||
<el-date-picker
|
||||
v-model="form.date"
|
||||
type="date"
|
||||
:locale="zhCn"
|
||||
placeholder="选择日期"
|
||||
format="MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
@@ -135,6 +137,7 @@ function handleClose() {
|
||||
<el-date-picker
|
||||
v-model="form.year"
|
||||
type="year"
|
||||
:locale="zhCn"
|
||||
placeholder="选择年份(可留空)"
|
||||
format="YYYY"
|
||||
value-format="YYYY"
|
||||
|
||||
@@ -3,6 +3,7 @@ import { ref, computed, watch } from 'vue'
|
||||
import { useAccountStore } from '@/stores/useAccountStore'
|
||||
import type { DebtInstallment, FinancialAccount } from '@/api/types'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
|
||||
interface Props {
|
||||
visible: boolean
|
||||
@@ -207,6 +208,7 @@ function handleClose() {
|
||||
<el-date-picker
|
||||
v-model="form.start_date"
|
||||
type="date"
|
||||
:locale="zhCn"
|
||||
placeholder="选择首次还款日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useTagStore } from '@/stores/useTagStore'
|
||||
import { useUIStore } from '@/stores/useUIStore'
|
||||
import type { TaskFormData } from '@/api/types'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
|
||||
const taskStore = useTaskStore()
|
||||
const categoryStore = useCategoryStore()
|
||||
@@ -158,6 +159,7 @@ function handleClose() {
|
||||
<el-date-picker
|
||||
v-model="form.due_date"
|
||||
type="datetime"
|
||||
:locale="zhCn"
|
||||
placeholder="选择截止日期~(可选)"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import 'element-plus/dist/index.css'
|
||||
import '@/styles/main.scss'
|
||||
@@ -12,7 +13,7 @@ const pinia = createPinia()
|
||||
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
app.use(ElementPlus)
|
||||
app.use(ElementPlus, { locale: zhCn })
|
||||
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { UploadProps } from 'element-plus'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
import { useUserSettingsStore } from '@/stores/useUserSettingsStore'
|
||||
|
||||
const userStore = useUserSettingsStore()
|
||||
@@ -171,6 +172,7 @@ async function handleSave() {
|
||||
<el-date-picker
|
||||
v-model="form.birthday"
|
||||
type="date"
|
||||
:locale="zhCn"
|
||||
placeholder="选择你的生日"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>webui</title>
|
||||
<script type="module" crossorigin src="/assets/index-CZ83FtWq.js"></script>
|
||||
<script type="module" crossorigin src="/assets/index-DP1ITMxF.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-CwFI-VDq.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/element-plus-CAICPA8-.js">
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DQPizegK.css">
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DE0sVD5v.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
Reference in New Issue
Block a user