mirror of
https://github.com/allinssl/allinssl.git
synced 2025-12-18 10:04:01 +08:00
【同步】前端项目源码
【修复】工作流兼容问题
This commit is contained in:
chudong
130
frontend/packages/vue/naive-ui/docs/circleProgress.md
Normal file
130
frontend/packages/vue/naive-ui/docs/circleProgress.md
Normal file
@@ -0,0 +1,130 @@
|
||||
以下是 `CircleProgress` 组件的使用文档，说明如何在 JSX 文件中使用该组件。
|
||||
|
||||
---
|
||||
|
||||
# CircleProgress 组件使用文档
|
||||
|
||||
`CircleProgress` 是一个功能强大的环形/横向进度条组件，支持自定义大小、颜色、渐变色、动画等功能。
|
||||
|
||||
## 安装
|
||||
|
||||
确保组件已正确导入到项目中：
|
||||
|
||||
```tsx
|
||||
import CircleProgress from './path/to/CircleProgress'
|
||||
```
|
||||
|
||||
## 基本用法
|
||||
|
||||
### 环形进度条
|
||||
|
||||
```tsx
|
||||
<CircleProgress percent={75} />
|
||||
```
|
||||
|
||||
### 横向进度条
|
||||
|
||||
```tsx
|
||||
<CircleProgress type="horizontal" percent={50} />
|
||||
```
|
||||
|
||||
### 使用渐变色
|
||||
|
||||
```tsx
|
||||
<CircleProgress
|
||||
percent={75}
|
||||
progressColor={[
|
||||
{ offset: 0, color: '#ff0000' },
|
||||
{ offset: 0.5, color: '#00ff00' },
|
||||
{ offset: 1, color: '#0000ff' },
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
### 自定义样式
|
||||
|
||||
```tsx
|
||||
<CircleProgress
|
||||
percent={90}
|
||||
size={200}
|
||||
strokeWidth={15}
|
||||
textColorFollowProgress={true}
|
||||
/>
|
||||
```
|
||||
|
||||
### 自定义进度文字
|
||||
|
||||
```tsx
|
||||
<CircleProgress
|
||||
percent={65}
|
||||
progressText={({ percent, color }) => (
|
||||
<span style={{ color }}>{percent}% 完成</span>
|
||||
)}
|
||||
/>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 描述 |
|
||||
|-------------------------|-------------------------------|-----------------|----------------------------------------------------------------------|
|
||||
| `type` | `'circle' | 'horizontal'` | `'circle'` | 进度条类型，支持环形或横向进度条。 |
|
||||
| `percent` | `number` | `0` | 当前进度值，范围为 0-100。 |
|
||||
| `size` | `number` | `300` | 环形进度条的直径（像素）。 |
|
||||
| `strokeWidth` | `number` | `10` | 进度条的宽度（像素）。 |
|
||||
| `trackColor` | `string` | `'#e5f1fa'` | 轨道颜色。 |
|
||||
| `progressColor` | `string | ColorStop[]` | `'#2ba0fb'` | 进度条颜色，支持纯色或渐变色数组。 |
|
||||
| `textColor` | `string` | `'#333'` | 进度文字颜色。 |
|
||||
| `textColorFollowProgress` | `boolean` | `false` | 是否让文字颜色跟随进度条颜色变化。 |
|
||||
| `startAngle` | `number` | `-Math.PI / 2` | 环形进度条的起始角度（弧度）。 |
|
||||
| `clockwise` | `boolean` | `true` | 是否顺时针绘制进度条。 |
|
||||
| `animationSpeed` | `number` | `0.1` | 动画过渡速度，范围为 0-1，值越大动画越快。 |
|
||||
| `width` | `number` | `300` | 横向进度条的宽度（像素，仅横向进度条生效）。 |
|
||||
| `height` | `number` | `20` | 横向进度条的高度（像素，仅横向进度条生效）。 |
|
||||
| `rounded` | `boolean` | `true` | 是否启用圆角。 |
|
||||
| `textPosition` | `'front' | 'back' | 'follow'`| `'follow'` | 横向进度条文字的位置。 |
|
||||
| `progressText` | `(props: SlotProps) => any` | `undefined` | 自定义进度文字的渲染函数。 |
|
||||
|
||||
## 示例
|
||||
|
||||
### 在 JSX 文件中完整示例
|
||||
|
||||
```tsx
|
||||
import React from 'react'
|
||||
import CircleProgress from './path/to/CircleProgress'
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>环形进度条</h1>
|
||||
<CircleProgress percent={75} />
|
||||
|
||||
<h1>横向进度条</h1>
|
||||
<CircleProgress type="horizontal" percent={50} />
|
||||
|
||||
<h1>渐变色进度条</h1>
|
||||
<CircleProgress
|
||||
percent={75}
|
||||
progressColor={[
|
||||
{ offset: 0, color: '#ff0000' },
|
||||
{ offset: 0.5, color: '#00ff00' },
|
||||
{ offset: 1, color: '#0000ff' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<h1>自定义文字</h1>
|
||||
<CircleProgress
|
||||
percent={65}
|
||||
progressText={({ percent, color }) => (
|
||||
<span style={{ color }}>{percent}% 完成</span>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
通过以上文档，您可以轻松在 JSX 文件中使用 `CircleProgress` 组件并根据需求进行自定义。
|
||||
472
frontend/packages/vue/naive-ui/docs/useForm.md
Normal file
472
frontend/packages/vue/naive-ui/docs/useForm.md
Normal file
@@ -0,0 +1,472 @@
|
||||
# useForm 使用文档
|
||||
|
||||
## 基本介绍
|
||||
|
||||
`useForm` 是一个基于 Naive UI 的表单构建工具，它提供了一种声明式的方式来创建和管理复杂的表单。通过这个钩子函数，你可以轻松地构建表单、管理表单状态、处理验证和提交等操作。
|
||||
|
||||
## 核心函数
|
||||
|
||||
### useForm
|
||||
|
||||
```typescript
|
||||
function useForm<T>(options: UseFormOptions<T>): FormInstanceWithComponent<T>
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `options`: 表单配置选项
|
||||
- `config`: 表单配置，定义表单的结构和布局
|
||||
- `request`: 可选，表单提交时调用的请求函数
|
||||
- `defaultValue`: 可选，表单的默认值
|
||||
|
||||
**返回值**:
|
||||
|
||||
- `component`: 表单渲染组件
|
||||
- `example`: 当前组件实例 (FormInst)
|
||||
- `data`: 响应式表单数据
|
||||
- `loading`: 加载状态
|
||||
- `config`: 表单配置
|
||||
- `props`: 表单属性
|
||||
- `rules`: 验证规则
|
||||
- `fetch`: 提交方法
|
||||
- `reset`: 重置方法
|
||||
- `validate`: 验证方法
|
||||
|
||||
**示例**:
|
||||
|
||||
```typescript
|
||||
const form = useForm({
|
||||
config: [...], // 表单配置
|
||||
request: async (data) => {
|
||||
// 处理表单提交
|
||||
return await api.submit(data)
|
||||
},
|
||||
defaultValue: { name: '', age: 0 }
|
||||
})
|
||||
```
|
||||
|
||||
## 表单项构建函数
|
||||
|
||||
### useFormInput
|
||||
|
||||
创建一个文本输入框表单项。
|
||||
|
||||
```typescript
|
||||
function useFormInput(
|
||||
label: string,
|
||||
key: string,
|
||||
other?: InputProps,
|
||||
itemAttrs?: FormItemConfig,
|
||||
slot?: { prefix?: Array<() => JSX.Element>; suffix?: Array<() => JSX.Element> },
|
||||
): FormItemConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `label`: 表单项标签
|
||||
- `key`: 表单数据字段名
|
||||
- `other`: 可选，输入框组件的额外属性
|
||||
- `itemAttrs`: 可选，表单项的额外属性
|
||||
- `slot`: 可选，前缀和后缀插槽
|
||||
|
||||
**返回值**: 表单项配置对象
|
||||
|
||||
### useFormTextarea
|
||||
|
||||
创建一个多行文本输入框表单项。
|
||||
|
||||
```typescript
|
||||
function useFormTextarea(
|
||||
label: string,
|
||||
key: string,
|
||||
other?: InputProps,
|
||||
itemAttrs?: FormItemConfig,
|
||||
slot?: { prefix?: Array<() => JSX.Element>; suffix?: Array<() => JSX.Element> },
|
||||
): FormItemCustomConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `label`: 表单项标签
|
||||
- `key`: 表单数据字段名
|
||||
- `other`: 可选，文本域组件的额外属性
|
||||
- `itemAttrs`: 可选，表单项的额外属性
|
||||
- `slot`: 可选，前缀和后缀插槽
|
||||
|
||||
**返回值**: 自定义表单项配置对象
|
||||
|
||||
### useFormPassword
|
||||
|
||||
创建一个密码输入框表单项。
|
||||
|
||||
```typescript
|
||||
function useFormPassword(
|
||||
label: string,
|
||||
key: string,
|
||||
other?: InputProps,
|
||||
itemAttrs?: FormItemConfig,
|
||||
slot?: { prefix?: Array<() => JSX.Element>; suffix?: Array<() => JSX.Element> },
|
||||
): FormItemCustomConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `label`: 表单项标签
|
||||
- `key`: 表单数据字段名
|
||||
- `other`: 可选，密码输入框组件的额外属性
|
||||
- `itemAttrs`: 可选，表单项的额外属性
|
||||
- `slot`: 可选，前缀和后缀插槽
|
||||
|
||||
**返回值**: 自定义表单项配置对象
|
||||
|
||||
### useFormInputNumber
|
||||
|
||||
创建一个数字输入框表单项。
|
||||
|
||||
```typescript
|
||||
function useFormInputNumber(
|
||||
label: string,
|
||||
key: string,
|
||||
other?: InputNumberProps,
|
||||
itemAttrs?: FormItemConfig,
|
||||
slot?: { prefix?: Array<() => JSX.Element>; suffix?: Array<() => JSX.Element> },
|
||||
): FormItemConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `label`: 表单项标签
|
||||
- `key`: 表单数据字段名
|
||||
- `other`: 可选，数字输入框组件的额外属性
|
||||
- `itemAttrs`: 可选，表单项的额外属性
|
||||
- `slot`: 可选，前缀和后缀插槽
|
||||
|
||||
**返回值**: 表单项配置对象
|
||||
|
||||
### useFormSelect
|
||||
|
||||
创建一个下拉选择框表单项。
|
||||
|
||||
```typescript
|
||||
function useFormSelect(
|
||||
label: string,
|
||||
key: string,
|
||||
options: SelectOption[],
|
||||
other?: SelectProps,
|
||||
itemAttrs?: FormItemConfig,
|
||||
slot?: { prefix?: Array<() => JSX.Element>; suffix?: Array<() => JSX.Element> },
|
||||
): FormItemConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `label`: 表单项标签
|
||||
- `key`: 表单数据字段名
|
||||
- `options`: 选择项数组
|
||||
- `other`: 可选，选择框组件的额外属性
|
||||
- `itemAttrs`: 可选，表单项的额外属性
|
||||
- `slot`: 可选，前缀和后缀插槽
|
||||
|
||||
**返回值**: 表单项配置对象
|
||||
|
||||
### useFormRadio
|
||||
|
||||
创建一个单选框组表单项。
|
||||
|
||||
```typescript
|
||||
function useFormRadio(
|
||||
label: string,
|
||||
key: string,
|
||||
options: RadioOptionItem[],
|
||||
other?: RadioProps,
|
||||
itemAttrs?: FormItemConfig,
|
||||
slot?: { prefix?: Array<() => JSX.Element>; suffix?: Array<() => JSX.Element> },
|
||||
): FormItemConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `label`: 表单项标签
|
||||
- `key`: 表单数据字段名
|
||||
- `options`: 单选项数组
|
||||
- `other`: 可选，单选框组件的额外属性
|
||||
- `itemAttrs`: 可选，表单项的额外属性
|
||||
- `slot`: 可选，前缀和后缀插槽
|
||||
|
||||
**返回值**: 表单项配置对象
|
||||
|
||||
### useFormCheckbox
|
||||
|
||||
创建一个复选框组表单项。
|
||||
|
||||
```typescript
|
||||
function useFormCheckbox(
|
||||
label: string,
|
||||
key: string,
|
||||
options: CheckboxOptionItem[],
|
||||
other?: CheckboxProps,
|
||||
itemAttrs?: FormItemConfig,
|
||||
slot?: { prefix?: Array<() => JSX.Element>; suffix?: Array<() => JSX.Element> },
|
||||
): FormItemConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `label`: 表单项标签
|
||||
- `key`: 表单数据字段名
|
||||
- `options`: 复选项数组
|
||||
- `other`: 可选，复选框组件的额外属性
|
||||
- `itemAttrs`: 可选，表单项的额外属性
|
||||
- `slot`: 可选，前缀和后缀插槽
|
||||
|
||||
**返回值**: 表单项配置对象
|
||||
|
||||
### useFormSwitch
|
||||
|
||||
创建一个开关表单项。
|
||||
|
||||
```typescript
|
||||
function useFormSwitch(
|
||||
label: string,
|
||||
key: string,
|
||||
other?: SwitchProps,
|
||||
itemAttrs?: FormItemConfig,
|
||||
slot?: { prefix?: Array<() => JSX.Element>; suffix?: Array<() => JSX.Element> },
|
||||
): FormItemConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `label`: 表单项标签
|
||||
- `key`: 表单数据字段名
|
||||
- `other`: 可选，开关组件的额外属性
|
||||
- `itemAttrs`: 可选，表单项的额外属性
|
||||
- `slot`: 可选，前缀和后缀插槽
|
||||
|
||||
**返回值**: 表单项配置对象
|
||||
|
||||
### useFormDatepicker
|
||||
|
||||
创建一个日期选择器表单项。
|
||||
|
||||
```typescript
|
||||
function useFormDatepicker(
|
||||
label: string,
|
||||
key: string,
|
||||
other?: DatePickerProps,
|
||||
itemAttrs?: FormItemConfig,
|
||||
slot?: { prefix?: Array<() => JSX.Element>; suffix?: Array<() => JSX.Element> },
|
||||
): FormItemConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `label`: 表单项标签
|
||||
- `key`: 表单数据字段名
|
||||
- `other`: 可选，日期选择器组件的额外属性
|
||||
- `itemAttrs`: 可选，表单项的额外属性
|
||||
- `slot`: 可选，前缀和后缀插槽
|
||||
|
||||
**返回值**: 表单项配置对象
|
||||
|
||||
### useFormTimepicker
|
||||
|
||||
创建一个时间选择器表单项。
|
||||
|
||||
```typescript
|
||||
function useFormTimepicker(
|
||||
label: string,
|
||||
key: string,
|
||||
other?: TimePickerProps,
|
||||
itemAttrs?: FormItemConfig,
|
||||
slot?: { prefix?: Array<() => JSX.Element>; suffix?: Array<() => JSX.Element> },
|
||||
): FormItemConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `label`: 表单项标签
|
||||
- `key`: 表单数据字段名
|
||||
- `other`: 可选，时间选择器组件的额外属性
|
||||
- `itemAttrs`: 可选，表单项的额外属性
|
||||
- `slot`: 可选，前缀和后缀插槽
|
||||
|
||||
**返回值**: 表单项配置对象
|
||||
|
||||
### useFormSlider
|
||||
|
||||
创建一个滑块表单项。
|
||||
|
||||
```typescript
|
||||
function useFormSlider(
|
||||
label: string,
|
||||
key: string,
|
||||
other?: SliderProps,
|
||||
itemAttrs?: FormItemConfig,
|
||||
slot?: { prefix?: Array<() => JSX.Element>; suffix?: Array<() => JSX.Element> },
|
||||
): FormItemConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `label`: 表单项标签
|
||||
- `key`: 表单数据字段名
|
||||
- `other`: 可选，滑块组件的额外属性
|
||||
- `itemAttrs`: 可选，表单项的额外属性
|
||||
- `slot`: 可选，前缀和后缀插槽
|
||||
|
||||
**返回值**: 表单项配置对象
|
||||
|
||||
### useFormSlot
|
||||
|
||||
创建一个插槽表单项。
|
||||
|
||||
```typescript
|
||||
function useFormSlot(key?: string): SlotFormElement
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `key`: 可选，插槽名称，默认为 'default'
|
||||
|
||||
**返回值**: 插槽表单元素配置对象
|
||||
|
||||
### useFormCustom
|
||||
|
||||
创建一个自定义渲染的表单项。
|
||||
|
||||
```typescript
|
||||
function useFormCustom<T extends Record<string, unknown>>(
|
||||
render: (formData: Ref<T>, formRef: Ref<FormInst | null>) => JSX.Element,
|
||||
): FormItemCustomConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `render`: 自定义渲染函数，接收表单数据和表单实例引用作为参数
|
||||
|
||||
**返回值**: 自定义表单项配置对象
|
||||
|
||||
### useFormGroup
|
||||
|
||||
创建一个表单项组。
|
||||
|
||||
```typescript
|
||||
function useFormGroup<T>(group: Record<string, any>[]): FormItemCustomConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `group`: 表单项组配置数组
|
||||
|
||||
**返回值**: 自定义表单项配置对象
|
||||
|
||||
### useFormMore
|
||||
|
||||
创建一个"更多配置"展开/折叠控件。
|
||||
|
||||
```typescript
|
||||
function useFormMore(isMore: Ref<boolean>, content?: string): FormItemCustomConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `isMore`: 是否展开的响应式引用
|
||||
- `content`: 可选，显示的内容文本
|
||||
|
||||
**返回值**: 自定义表单项配置对象
|
||||
|
||||
### useFormHelp
|
||||
|
||||
创建一个帮助文档表单项。
|
||||
|
||||
```typescript
|
||||
function useFormHelp(
|
||||
options: { content: string | JSX.Element; isHtml?: boolean }[],
|
||||
other?: { listStyle?: string },
|
||||
): FormItemCustomConfig
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `options`: 帮助内容配置数组
|
||||
- `content`: 帮助内容文本或JSX元素
|
||||
- `isHtml`: 可选，内容是否为HTML
|
||||
- `other`: 可选，其他配置
|
||||
- `listStyle`: 可选，列表样式
|
||||
|
||||
**返回值**: 自定义表单项配置对象
|
||||
|
||||
## 使用示例
|
||||
|
||||
```typescript
|
||||
import useForm, { useFormHooks } from 'path/to/useForm'
|
||||
|
||||
// 解构所有表单钩子函数
|
||||
const {
|
||||
useFormInput,
|
||||
useFormSelect,
|
||||
useFormRadio,
|
||||
// ...其他钩子函数
|
||||
} = useFormHooks()
|
||||
|
||||
// 创建表单实例
|
||||
const form = useForm({
|
||||
config: [
|
||||
useFormInput('用户名', 'username', { placeholder: '请输入用户名' }),
|
||||
useFormPassword('密码', 'password'),
|
||||
useFormSelect('角色', 'role', [
|
||||
{ label: '管理员', value: 'admin' },
|
||||
{ label: '用户', value: 'user' }
|
||||
]),
|
||||
useFormRadio('性别', 'gender', [
|
||||
{ label: '男', value: 'male' },
|
||||
{ label: '女', value: 'female' }
|
||||
]),
|
||||
// 使用栅格布局
|
||||
{
|
||||
type: 'grid',
|
||||
cols: 2,
|
||||
children: [
|
||||
useFormInput('姓', 'firstName'),
|
||||
useFormInput('名', 'lastName')
|
||||
]
|
||||
},
|
||||
// 使用自定义渲染
|
||||
useFormCustom((formData) => (
|
||||
<div>当前用户名: {formData.value.username}</div>
|
||||
))
|
||||
],
|
||||
request: async (data) => {
|
||||
// 提交表单数据
|
||||
return await api.submitForm(data)
|
||||
},
|
||||
defaultValue: {
|
||||
username: '',
|
||||
password: '',
|
||||
role: 'user',
|
||||
gender: 'male',
|
||||
firstName: '',
|
||||
lastName: ''
|
||||
}
|
||||
})
|
||||
|
||||
// 在组件中使用
|
||||
// <form.component />
|
||||
|
||||
// 提交表单
|
||||
// await form.fetch()
|
||||
|
||||
// 重置表单
|
||||
// form.reset()
|
||||
|
||||
// 验证表单
|
||||
// const valid = await form.validate()
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 所有表单项都支持通过 `itemAttrs` 参数配置表单项的属性，如 `required`、`rule` 等。
|
||||
2. 大多数表单项都支持通过 `slot` 参数配置前缀和后缀插槽。
|
||||
3. 表单的验证规则可以通过 `form.rules.value = { ... }` 进行设置。
|
||||
4. 表单的属性可以通过 `form.props.value = { ... }` 进行设置。
|
||||
256
frontend/packages/vue/naive-ui/docs/useTable.md
Normal file
256
frontend/packages/vue/naive-ui/docs/useTable.md
Normal file
@@ -0,0 +1,256 @@
|
||||
# useTable 使用文档
|
||||
|
||||
## 基本介绍
|
||||
|
||||
`useTable` 是一个基于 Naive UI 的表格构建工具，它提供了一种简洁的方式来创建和管理数据表格。通过这个钩子函数，你可以轻松地构建表格、管理表格状态、处理数据加载和分页等操作。
|
||||
|
||||
## 核心函数
|
||||
|
||||
### useTable
|
||||
|
||||
```typescript
|
||||
function useTable<T = Record<string, unknown>, Z extends Record<string, unknown> = Record<string, unknown>>(
|
||||
options: UseTableOptions<T, Z>,
|
||||
): TableInstanceWithComponent<T, Z>
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `options`: 表格配置选项
|
||||
- `config`: 表格列配置
|
||||
- `request`: 数据请求函数，用于获取表格数据
|
||||
- `defaultValue`: 可选，默认请求参数，支持响应式
|
||||
|
||||
**返回值**:
|
||||
|
||||
- `loading`: 加载状态
|
||||
- `example`: 表格组件实例引用
|
||||
- `data`: 响应式表格数据
|
||||
- `param`: 请求参数
|
||||
- `reset`: 重置方法
|
||||
- `fetch`: 数据获取方法
|
||||
- `component`: 表格渲染组件
|
||||
- `config`: 表格列配置
|
||||
- `props`: 表格属性
|
||||
|
||||
**示例**:
|
||||
|
||||
```typescript
|
||||
const table = useTable({
|
||||
config: [
|
||||
{ title: '姓名', key: 'name' },
|
||||
{ title: '年龄', key: 'age' },
|
||||
],
|
||||
request: async (params) => {
|
||||
// 处理数据请求
|
||||
const response = await api.getUsers(params)
|
||||
return { data: response.data }
|
||||
},
|
||||
defaultValue: { page: 1, pageSize: 20 },
|
||||
})
|
||||
```
|
||||
|
||||
### useTablePage
|
||||
|
||||
```typescript
|
||||
function useTablePage<T extends Record<string, any> = Record<string, any>>(
|
||||
options: TablePageProps<T>,
|
||||
): {
|
||||
component: (
|
||||
compProps?: Record<string, unknown>,
|
||||
context?: { slots?: Record<string, () => JSX.Element> },
|
||||
) => JSX.Element
|
||||
handlePageChange: (currentPage: number) => void
|
||||
handlePageSizeChange: (size: number) => void
|
||||
pageSizeOptions: Ref<number[]>
|
||||
}
|
||||
```
|
||||
|
||||
**参数**:
|
||||
|
||||
- `options`: 分页配置选项
|
||||
- `param`: 请求参数的响应式引用
|
||||
- `alias`: 可选，字段别名映射，默认为 `{ page: 'page', pageSize: 'pageSize', total: 'total' }`
|
||||
- `props`: 可选，分页组件属性
|
||||
- `slot`: 可选，分页组件插槽
|
||||
|
||||
**返回值**:
|
||||
|
||||
- `component`: 分页渲染组件
|
||||
- `handlePageChange`: 页码变更处理函数
|
||||
- `handlePageSizeChange`: 每页条数变更处理函数
|
||||
- `pageSizeOptions`: 每页条数选项
|
||||
|
||||
**示例**:
|
||||
|
||||
```typescript
|
||||
const pagination = useTablePage({
|
||||
param: table.param,
|
||||
alias: { page: 'currentPage', pageSize: 'size', total: 'totalCount' },
|
||||
props: { showQuickJumper: true },
|
||||
})
|
||||
```
|
||||
|
||||
## 使用示例
|
||||
|
||||
### 基本用法
|
||||
|
||||
```typescript
|
||||
import useTable, { useTablePage } from 'path/to/useTable'
|
||||
|
||||
// 创建表格实例
|
||||
const table = useTable({
|
||||
config: [
|
||||
{ title: '姓名', key: 'name' },
|
||||
{ title: '年龄', key: 'age' },
|
||||
{ title: '地址', key: 'address' },
|
||||
],
|
||||
request: async (params) => {
|
||||
// 模拟API请求
|
||||
const response = await api.getUsers(params)
|
||||
return { data: response.list }
|
||||
},
|
||||
defaultValue: { page: 1, pageSize: 20 },
|
||||
})
|
||||
|
||||
// 创建分页实例
|
||||
const pagination = useTablePage({
|
||||
param: table.param,
|
||||
})
|
||||
|
||||
// 在组件中使用
|
||||
// <table.component />
|
||||
// <pagination.component />
|
||||
|
||||
// 刷新表格数据
|
||||
// await table.fetch()
|
||||
|
||||
// 重置表格
|
||||
// await table.reset()
|
||||
```
|
||||
|
||||
### 自定义分页
|
||||
|
||||
```typescript
|
||||
const pagination = useTablePage({
|
||||
param: table.param,
|
||||
alias: {
|
||||
page: 'currentPage', // 自定义页码字段名
|
||||
pageSize: 'size', // 自定义每页条数字段名
|
||||
total: 'totalCount', // 自定义总条数字段名
|
||||
},
|
||||
props: {
|
||||
showQuickJumper: true, // 显示快速跳转
|
||||
showSizePicker: true, // 显示每页条数选择器
|
||||
pageSizes: [10, 20, 50, 100], // 自定义每页条数选项
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### 带插槽的表格
|
||||
|
||||
```typescript
|
||||
// 在组件中使用
|
||||
<table.component>
|
||||
{{
|
||||
empty: () => <div>暂无数据</div>,
|
||||
loading: () => <div>加载中...</div>
|
||||
}}
|
||||
</table.component>
|
||||
```
|
||||
|
||||
### 带插槽的分页
|
||||
|
||||
```typescript
|
||||
// 在组件中使用
|
||||
<pagination.component>
|
||||
{{
|
||||
prefix: () => <span>共 {table.param.value.total} 条</span>,
|
||||
suffix: () => <button onClick={table.fetch}>刷新</button>
|
||||
}}
|
||||
</pagination.component>
|
||||
```
|
||||
|
||||
### 自定义表格属性
|
||||
|
||||
```typescript
|
||||
// 设置表格属性
|
||||
table.props.value = {
|
||||
striped: true, // 斑马纹
|
||||
bordered: false, // 无边框
|
||||
singleLine: false, // 允许内容换行
|
||||
size: 'small', // 表格尺寸
|
||||
rowKey: (row) => row.id, // 行唯一标识
|
||||
maxHeight: 400, // 最大高度
|
||||
}
|
||||
```
|
||||
|
||||
## 高级用法
|
||||
|
||||
### 条件查询
|
||||
|
||||
```typescript
|
||||
// 创建表格实例
|
||||
const table = useTable({
|
||||
config: [...],
|
||||
request: async (params) => {
|
||||
const response = await api.getUsers(params)
|
||||
return { data: response.list }
|
||||
},
|
||||
defaultValue: {
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
name: '',
|
||||
status: null
|
||||
}
|
||||
})
|
||||
|
||||
// 条件查询
|
||||
const handleSearch = () => {
|
||||
table.param.value.name = searchForm.value.name
|
||||
table.param.value.status = searchForm.value.status
|
||||
// 查询时重置到第一页
|
||||
table.param.value.page = 1
|
||||
table.fetch()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
const handleReset = () => {
|
||||
table.reset()
|
||||
}
|
||||
```
|
||||
|
||||
### 表格操作列
|
||||
|
||||
```typescript
|
||||
const table = useTable({
|
||||
config: [
|
||||
{ title: '姓名', key: 'name' },
|
||||
{ title: '年龄', key: 'age' },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
render: (row) => {
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => handleEdit(row)}>编辑</button>
|
||||
<button onClick={() => handleDelete(row)}>删除</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
],
|
||||
request: async (params) => {
|
||||
const response = await api.getUsers(params)
|
||||
return { data: response.list }
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `request` 函数必须返回一个包含 `data` 字段的对象，该字段包含表格数据数组。
|
||||
2. 默认情况下，分页参数使用 `page`、`pageSize` 和 `total` 字段名，可以通过 `alias` 参数自定义。
|
||||
3. 表格的属性可以通过 `table.props.value = { ... }` 进行设置。
|
||||
4. 当请求参数 `param` 发生变化时，表格会自动重新加载数据。
|
||||
5. 使用 `reset` 方法可以将请求参数重置为默认值并重新加载数据。
|
||||
Reference in New Issue
Block a user