解决多语言切换时部分组件文本未更新问题
This commit is contained in:
@@ -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";
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user