feat: 内建组件内的固定中文文案,改为可替换

This commit is contained in:
Hooray
2026-06-04 09:42:01 +08:00
parent 410ce626a8
commit f1c0258676
4 changed files with 52 additions and 5 deletions
@@ -27,6 +27,7 @@
| `max` | `number` | `0` | 最大上传数量,`0` 表示不限制 |
| `directory` | `boolean` | `false` | 是否选择文件夹;启用后只能选择文件夹,文件夹内文件会扁平化上传 |
| `disabled` | `boolean` | `false` | 是否禁用 |
| `description` | `string` | `拖放或点击上传` | 描述信息 |
```ts
interface FileUploadRequestOptions {
@@ -23,6 +23,7 @@ const props = withDefaults(defineProps<{
max?: number
directory?: boolean
disabled?: boolean
description?: string
}>(), {
action: '',
method: 'post',
@@ -33,6 +34,7 @@ const props = withDefaults(defineProps<{
max: 0,
directory: false,
disabled: false,
description: '拖放或点击上传',
})
const emits = defineEmits<{
@@ -263,7 +265,7 @@ function removeFile(idx: number) {
<slot>
<Icon name="i-icon-park-outline:upload" class="text-2xl text-card-foreground/50 mb-2" />
<div class="text-sm text-card-foreground/70">
拖放或点击上传
{{ props.description }}
</div>
</slot>
<input
@@ -17,6 +17,7 @@
| `total` | `number` | **必需** | 数据总条数 |
| `sizes` | `number[]` | `[10, 20, 30, 40, 50, 100]` | 每页条数选项 |
| `layout` | `string` | `'total, sizes, ->, pager, jumper'` | 布局配置 |
| `textTemplates` | `object` | 见下方 | 文本模板配置,用于国际化 |
| `page` | `number` | **必需** | 当前页码(支持 v-model) |
| `size` | `number` | **必需** | 每页条数(支持 v-model) |
@@ -54,6 +55,39 @@
<FaPagination layout="total, sizes, pager" />
```
### textTemplates 配置
`textTemplates` 属性用于自定义分页组件中的文本,支持国际化场景。
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `total` | `(total: number) => string` | `(total) => \`共 ${total} 条\`` | 总条数文本格式化函数 |
| `sizes` | `(size: number) => string` | `(size) => \`${size} 条/页\`` | 每页条数文本格式化函数 |
| `jumper` | `{ before: string, after: string }` | `{ before: '前往', after: '页' }` | 页码跳转前后文本 |
#### 国际化示例
```vue
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
<template>
<FaPagination
:text-templates="{
total: (total) => t('pagination.total', { total }),
sizes: (size) => t('pagination.sizes', { size }),
jumper: {
before: t('pagination.jumperBefore'),
after: t('pagination.jumperAfter'),
},
}"
/>
</template>
```
1. **必需属性**:`total`、`page`、`size` 为必需属性
2. **双向绑定**:`page` 和 `size` 支持 `v-model` 双向绑定
3. **页码范围**:跳转页码会自动限制在有效范围内
@@ -21,9 +21,19 @@ const props = withDefaults(defineProps<{
total: number
sizes?: number[]
layout?: string
textTemplates?: {
total?: (total: number) => string
sizes?: (size: number) => string
jumper?: { before: string, after: string }
}
}>(), {
sizes: () => [10, 20, 30, 40, 50, 100],
layout: 'total, sizes, ->, pager, jumper',
textTemplates: () => ({
total: (total: number) => `共 ${total} 条`,
sizes: (size: number) => `${size} 条/页`,
jumper: { before: '前往', after: '页' },
}),
})
const emits = defineEmits<{
@@ -108,15 +118,15 @@ function handleJump() {
<PaginationLast size="icon-sm" class="size-8 rtl:rotate-180" />
</PaginationContent>
<div v-if="layoutConfig.total.show" class="text-sm text-muted-foreground" :style="{ order: layoutConfig.total.order }">
共 {{ props.total }} 条
{{ props.textTemplates.total?.(props.total) }}
</div>
<div v-if="layoutConfig.sizes.show" :style="{ order: layoutConfig.sizes.order }">
<Select v-model="size" :options="props.sizes.map(size => ({ label: `${size} 条/页`, value: size }))" class="w-auto" />
<Select v-model="size" :options="props.sizes.map(size => ({ label: props.textTemplates.sizes?.(size) ?? '', value: size }))" class="w-auto" />
</div>
<div v-if="layoutConfig.jumper.show" class="flex-center gap-2" :style="{ order: layoutConfig.jumper.order }">
<span class="text-sm text-muted-foreground">前往</span>
<span class="text-sm text-muted-foreground">{{ props.textTemplates.jumper?.before }}</span>
<Input v-model="jumpPage" class="h-8 w-16" input-class="text-center" @focus="handleFocus" @input="handleInput" @keyup.enter="handleJump" />
<span class="text-sm text-muted-foreground">页</span>
<span class="text-sm text-muted-foreground">{{ props.textTemplates.jumper?.after }}</span>
</div>
<div v-if="layoutConfig['->'].show" class="flex-1" :style="{ order: layoutConfig['->'].order }" />
</Pagination>