feat(projects): pro-naive-ui 示例支持多语言

This commit is contained in:
zhengchangfu
2025-05-15 23:37:10 +08:00
parent 471e7a40e4
commit 02d3d5767e
10 changed files with 468 additions and 182 deletions

View File

@@ -2,6 +2,7 @@
import { ref } from 'vue';
import { useMessage } from 'naive-ui';
import { createProForm } from 'pro-naive-ui';
import { $t } from '@/locales';
const step = ref(1);
const submiting = ref(false);
@@ -37,24 +38,28 @@ function delay(time: number) {
<template>
<div class="color-#fff">
<ProCard title="分步表单" :segmented="{ content: true }" :show-collapse="false">
<ProCard :title="$t('page.proNaive.form.step.title')" :segmented="{ content: true }" :show-collapse="false">
<div class="flex flex-col items-center justify-center">
<NSteps :current="step" class="mb-50px ml-200px w-60%">
<NStep title="表单1" />
<NStep title="表单2" />
<NStep :title="$t('page.proNaive.form.step.step1.title')" />
<NStep :title="$t('page.proNaive.form.step.step2.title')" />
</NSteps>
<template v-if="step === 1">
<ProForm :form="form" label-placement="left">
<ProInput title="表单1字段" path="form1Field" required />
<NButton @click="toNextStepAfterValidated">下一步</NButton>
<ProInput :title="$t('page.proNaive.form.step.step1.field')" path="form1Field" required />
<NButton @click="toNextStepAfterValidated">{{ $t('page.proNaive.form.step.step1.nextStep') }}</NButton>
</ProForm>
</template>
<template v-if="step === 2">
<ProForm :form="form2" :loading="submiting" label-placement="left">
<ProInput title="表单2字段" path="form2Field" required />
<ProInput :title="$t('page.proNaive.form.step.step2.field')" path="form2Field" required />
<NFlex>
<NButton :disabled="submiting" @click="step -= 1">上一步</NButton>
<NButton type="primary" attr-type="submit" :loading="submiting">提交</NButton>
<NButton :disabled="submiting" @click="step -= 1">
{{ $t('page.proNaive.form.step.step2.prevStep') }}
</NButton>
<NButton type="primary" attr-type="submit" :loading="submiting">
{{ $t('page.proNaive.form.step.step2.submit') }}
</NButton>
</NFlex>
</ProForm>
</template>