Skip to content

Commit f1c0258

Browse files
committed
feat: 内建组件内的固定中文文案,改为可替换
1 parent 410ce62 commit f1c0258

4 files changed

Lines changed: 52 additions & 5 deletions

File tree

‎packages/components/src/basic/file-upload/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
| `max` | `number` | `0` | 最大上传数量,`0` 表示不限制 |
2828
| `directory` | `boolean` | `false` | 是否选择文件夹;启用后只能选择文件夹,文件夹内文件会扁平化上传 |
2929
| `disabled` | `boolean` | `false` | 是否禁用 |
30+
| `description` | `string` | `拖放或点击上传` | 描述信息 |
3031

3132
```ts
3233
interface FileUploadRequestOptions {

‎packages/components/src/basic/file-upload/index.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const props = withDefaults(defineProps<{
2323
max?: number
2424
directory?: boolean
2525
disabled?: boolean
26+
description?: string
2627
}>(), {
2728
action: '',
2829
method: 'post',
@@ -33,6 +34,7 @@ const props = withDefaults(defineProps<{
3334
max: 0,
3435
directory: false,
3536
disabled: false,
37+
description: '拖放或点击上传',
3638
})
3739
3840
const emits = defineEmits<{
@@ -263,7 +265,7 @@ function removeFile(idx: number) {
263265
<slot>
264266
<Icon name="i-icon-park-outline:upload" class="text-2xl text-card-foreground/50 mb-2" />
265267
<div class="text-sm text-card-foreground/70">
266-
拖放或点击上传
268+
{{ props.description }}
267269
</div>
268270
</slot>
269271
<input

‎packages/components/src/basic/pagination/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
| `total` | `number` | **必需** | 数据总条数 |
1818
| `sizes` | `number[]` | `[10, 20, 30, 40, 50, 100]` | 每页条数选项 |
1919
| `layout` | `string` | `'total, sizes, ->, pager, jumper'` | 布局配置 |
20+
| `textTemplates` | `object` | 见下方 | 文本模板配置,用于国际化 |
2021
| `page` | `number` | **必需** | 当前页码(支持 v-model) |
2122
| `size` | `number` | **必需** | 每页条数(支持 v-model) |
2223

@@ -54,6 +55,39 @@
5455
<FaPagination layout="total, sizes, pager" />
5556
```
5657

58+
### textTemplates 配置
59+
60+
`textTemplates` 属性用于自定义分页组件中的文本,支持国际化场景。
61+
62+
| 属性 | 类型 | 默认值 | 说明 |
63+
|------|------|--------|------|
64+
| `total` | `(total: number) => string` | `(total) => \`共 ${total} 条\`` | 总条数文本格式化函数 |
65+
| `sizes` | `(size: number) => string` | `(size) => \`${size} 条/页\`` | 每页条数文本格式化函数 |
66+
| `jumper` | `{ before: string, after: string }` | `{ before: '前往', after: '页' }` | 页码跳转前后文本 |
67+
68+
#### 国际化示例
69+
70+
```vue
71+
<script setup>
72+
import { useI18n } from 'vue-i18n'
73+
74+
const { t } = useI18n()
75+
</script>
76+
77+
<template>
78+
<FaPagination
79+
:text-templates="{
80+
total: (total) => t('pagination.total', { total }),
81+
sizes: (size) => t('pagination.sizes', { size }),
82+
jumper: {
83+
before: t('pagination.jumperBefore'),
84+
after: t('pagination.jumperAfter'),
85+
},
86+
}"
87+
/>
88+
</template>
89+
```
90+
5791
1. **必需属性**`total``page``size` 为必需属性
5892
2. **双向绑定**`page``size` 支持 `v-model` 双向绑定
5993
3. **页码范围**:跳转页码会自动限制在有效范围内

‎packages/components/src/basic/pagination/index.vue‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,19 @@ const props = withDefaults(defineProps<{
2121
total: number
2222
sizes?: number[]
2323
layout?: string
24+
textTemplates?: {
25+
total?: (total: number) => string
26+
sizes?: (size: number) => string
27+
jumper?: { before: string, after: string }
28+
}
2429
}>(), {
2530
sizes: () => [10, 20, 30, 40, 50, 100],
2631
layout: 'total, sizes, ->, pager, jumper',
32+
textTemplates: () => ({
33+
total: (total: number) => `共 ${total} 条`,
34+
sizes: (size: number) => `${size} 条/页`,
35+
jumper: { before: '前往', after: '' },
36+
}),
2737
})
2838
2939
const emits = defineEmits<{
@@ -108,15 +118,15 @@ function handleJump() {
108118
<PaginationLast size="icon-sm" class="size-8 rtl:rotate-180" />
109119
</PaginationContent>
110120
<div v-if="layoutConfig.total.show" class="text-sm text-muted-foreground" :style="{ order: layoutConfig.total.order }">
111-
{{ props.total }}
121+
{{ props.textTemplates.total?.(props.total) }}
112122
</div>
113123
<div v-if="layoutConfig.sizes.show" :style="{ order: layoutConfig.sizes.order }">
114-
<Select v-model="size" :options="props.sizes.map(size => ({ label: `${size} 条/页`, value: size }))" class="w-auto" />
124+
<Select v-model="size" :options="props.sizes.map(size => ({ label: props.textTemplates.sizes?.(size) ?? '', value: size }))" class="w-auto" />
115125
</div>
116126
<div v-if="layoutConfig.jumper.show" class="flex-center gap-2" :style="{ order: layoutConfig.jumper.order }">
117-
<span class="text-sm text-muted-foreground">前往</span>
127+
<span class="text-sm text-muted-foreground">{{ props.textTemplates.jumper?.before }}</span>
118128
<Input v-model="jumpPage" class="h-8 w-16" input-class="text-center" @focus="handleFocus" @input="handleInput" @keyup.enter="handleJump" />
119-
<span class="text-sm text-muted-foreground"></span>
129+
<span class="text-sm text-muted-foreground">{{ props.textTemplates.jumper?.after }}</span>
120130
</div>
121131
<div v-if="layoutConfig['->'].show" class="flex-1" :style="{ order: layoutConfig['->'].order }" />
122132
</Pagination>

0 commit comments

Comments
 (0)