解决多语言切换时部分组件文本未更新问题

This commit is contained in:
icssoa
2025-07-28 18:57:37 +08:00
parent 524a8239ad
commit 4cace687c4
24 changed files with 123 additions and 60 deletions

View File

@@ -1,13 +1,13 @@
<template>
<cl-page>
<view class="p-3 overflow-visible">
<demo-item label="单列排序">
<demo-item :label="t('单列排序')">
<cl-draggable v-model="list">
<template #item="{ item, index }">
<view
class="flex flex-row items-center p-3 bg-surface-100 rounded-lg mb-2"
class="flex flex-row items-center p-3 bg-surface-100 rounded-lg mb-2 dark:!bg-surface-700"
:class="{
'!bg-surface-300': item['disabled']
'opacity-50': item['disabled']
}"
>
<cl-text>{{ (item as UTSJSONObject).label }}</cl-text>
@@ -16,7 +16,7 @@
</cl-draggable>
</demo-item>
<demo-item label="结合列表使用">
<demo-item :label="t('结合列表使用')">
<cl-list border>
<cl-draggable v-model="list2">
<template #item="{ item, index, dragging, dragIndex }">
@@ -36,13 +36,13 @@
</cl-list>
</demo-item>
<demo-item label="多列排序">
<demo-item :label="t('多列排序')">
<cl-draggable v-model="list3" :columns="4">
<template #item="{ item, index }">
<view
class="flex flex-row items-center justify-center p-3 bg-surface-100 rounded-lg m-1"
class="flex flex-row items-center justify-center p-3 bg-surface-100 rounded-lg m-1 dark:!bg-surface-700"
:class="{
'!bg-surface-300': (item as UTSJSONObject).disabled
'opacity-50': item['disabled']
}"
>
<cl-text>{{ (item as UTSJSONObject).label }}</cl-text>
@@ -51,7 +51,7 @@
</cl-draggable>
</demo-item>
<demo-item label="结合图片使用">
<demo-item :label="t('结合图片使用')">
<cl-draggable v-model="list4" :columns="4">
<template #item="{ item, index }">
<view class="p-[2px]">
@@ -72,6 +72,7 @@
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
import { ref } from "vue";

View File

@@ -30,9 +30,14 @@
></cl-select-date>
</demo-item>
<demo-item :label="t('范围选择')">
<cl-text :pt="{ className: 'mb-3' }">{{ form.date5 }}</cl-text>
<cl-select-date v-model:values="form.date5" type="date" rangeable></cl-select-date>
</demo-item>
<demo-item :label="t('自定义')">
<cl-select-date
v-model="form.date5"
v-model="form.date6"
:type="type"
:label-format="labelFormat"
:disabled="isDisabled"
@@ -44,27 +49,55 @@
className: 'mt-3'
}"
>
<cl-list-item :label="t('年')">
<cl-list-item label="YYYY">
<cl-switch v-model="isYear"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('年-月')">
<cl-list-item label="YYYY-MM">
<cl-switch v-model="isMonth"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('年-月-日')">
<cl-list-item
label="YYYY-MM-DD"
:pt="{
label: {
className: 'flex-[2]'
}
}"
>
<cl-switch v-model="isDate"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('年-月-日 时')">
<cl-list-item
label="YYYY-MM-DD HH"
:pt="{
label: {
className: 'flex-[2]'
}
}"
>
<cl-switch v-model="isHour"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('年-月-日 时:分')">
<cl-list-item
label="YYYY-MM-DD HH:mm"
:pt="{
label: {
className: 'flex-[2]'
}
}"
>
<cl-switch v-model="isMinute"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('年-月-日 时:分:秒')">
<cl-list-item
label="YYYY-MM-DD HH:mm:ss"
:pt="{
label: {
className: 'flex-[2]'
}
}"
>
<cl-switch v-model="isSecond"></cl-switch>
</cl-list-item>
@@ -94,7 +127,8 @@ type Form = {
date2: string;
date3: string;
date4: string;
date5: string;
date5: string[];
date6: string;
};
const form = reactive<Form>({
@@ -102,7 +136,8 @@ const form = reactive<Form>({
date2: "",
date3: "",
date4: "",
date5: ""
date5: [],
date6: ""
});
const isDisabled = ref(false);