mirror of
https://github.com/fantastic-admin/basic.git
synced 2026-10-07 13:48:38 +08:00
feat: 内建组件内的固定中文文案,改为可替换
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user