@jnrs/vue-core 1.2.40 → 1.2.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +234 -245
- package/CHANGELOG.md +22 -1
- package/dist/components/JnDateQuery.vue.d.ts +9 -25
- package/dist/components/index.js +1034 -1110
- package/dist/locales/en/components.d.ts +0 -3
- package/dist/locales/en/index.d.ts +0 -3
- package/dist/locales/index.js +0 -6
- package/dist/locales/zhCn/components.d.ts +0 -3
- package/dist/locales/zhCn/index.d.ts +0 -3
- package/package.json +1 -1
package/AGENTS.md
CHANGED
|
@@ -6,19 +6,19 @@
|
|
|
6
6
|
|
|
7
7
|
## 📦 模块总览
|
|
8
8
|
|
|
9
|
-
| 模块路径
|
|
10
|
-
| ---------------------------- |
|
|
11
|
-
| `@jnrs/vue-core` | 主模块，包含基础类型定义
|
|
12
|
-
| `@jnrs/vue-core/pinia` | Pinia 状态管理模块
|
|
13
|
-
| `@jnrs/vue-core/router` | Vue Router 路由模块
|
|
14
|
-
| `@jnrs/vue-core/components` | Vue 组件库
|
|
15
|
-
| `@jnrs/vue-core/composables` | Vue 组合式 API
|
|
16
|
-
| `@jnrs/vue-core/constants` | 常量定义
|
|
17
|
-
| `@jnrs/vue-core/lib` | 工具库
|
|
18
|
-
| `@jnrs/vue-core/locales` | 国际化配置
|
|
19
|
-
| `@jnrs/vue-core/utils` | 工具函数
|
|
20
|
-
|
|
21
|
-
|
|
9
|
+
| 模块路径 | 说明 |
|
|
10
|
+
| ---------------------------- | --------------- |
|
|
11
|
+
| `@jnrs/vue-core` | 主模块，包含基础类型定义 |
|
|
12
|
+
| `@jnrs/vue-core/pinia` | Pinia 状态管理模块 |
|
|
13
|
+
| `@jnrs/vue-core/router` | Vue Router 路由模块 |
|
|
14
|
+
| `@jnrs/vue-core/components` | Vue 组件库 |
|
|
15
|
+
| `@jnrs/vue-core/composables` | Vue 组合式 API |
|
|
16
|
+
| `@jnrs/vue-core/constants` | 常量定义 |
|
|
17
|
+
| `@jnrs/vue-core/lib` | 工具库 |
|
|
18
|
+
| `@jnrs/vue-core/locales` | 国际化配置 |
|
|
19
|
+
| `@jnrs/vue-core/utils` | 工具函数 |
|
|
20
|
+
|
|
21
|
+
***
|
|
22
22
|
|
|
23
23
|
## 📋 API 详情
|
|
24
24
|
|
|
@@ -30,14 +30,14 @@
|
|
|
30
30
|
|
|
31
31
|
菜单项接口定义
|
|
32
32
|
|
|
33
|
-
| 属性名
|
|
34
|
-
| --------- | ------------- |
|
|
35
|
-
| meta | `RouteMeta` | ✓
|
|
36
|
-
| path | `string` | ✓
|
|
37
|
-
| name | `string` | -
|
|
38
|
-
| component | `string` | -
|
|
39
|
-
| redirect | `string` | -
|
|
40
|
-
| children | `IMenuItem[]` | -
|
|
33
|
+
| 属性名 | 类型 | 必填 | 说明 |
|
|
34
|
+
| --------- | ------------- | -- | ----- |
|
|
35
|
+
| meta | `RouteMeta` | ✓ | 路由元信息 |
|
|
36
|
+
| path | `string` | ✓ | 路径 |
|
|
37
|
+
| name | `string` | - | 名称 |
|
|
38
|
+
| component | `string` | - | 组件路径 |
|
|
39
|
+
| redirect | `string` | - | 重定向路径 |
|
|
40
|
+
| children | `IMenuItem[]` | - | 子菜单项 |
|
|
41
41
|
|
|
42
42
|
##### ElSize
|
|
43
43
|
|
|
@@ -59,23 +59,23 @@ type ElButtonType = 'default' | 'primary' | 'success' | 'info' | 'warning' | 'te
|
|
|
59
59
|
|
|
60
60
|
文件信息类型
|
|
61
61
|
|
|
62
|
-
| 属性名
|
|
63
|
-
| -------------- | -------- |
|
|
64
|
-
| id | `number` | ✓
|
|
65
|
-
| documentId | `number` | ✓
|
|
66
|
-
| fileName | `string` | ✓
|
|
67
|
-
| uniqueFileName | `string` | ✓
|
|
68
|
-
| fileType | `string` | ✓
|
|
69
|
-
| fileSize | `number` | ✓
|
|
62
|
+
| 属性名 | 类型 | 必填 | 说明 |
|
|
63
|
+
| -------------- | -------- | -- | ------------------- |
|
|
64
|
+
| id | `number` | ✓ | 数据 id |
|
|
65
|
+
| documentId | `number` | ✓ | 文件 id |
|
|
66
|
+
| fileName | `string` | ✓ | 文件名 |
|
|
67
|
+
| uniqueFileName | `string` | ✓ | 文件名唯一标识（用于文件获取 API） |
|
|
68
|
+
| fileType | `string` | ✓ | MIME 类型 |
|
|
69
|
+
| fileSize | `number` | ✓ | 文件大小（单位：字节） |
|
|
70
70
|
|
|
71
71
|
##### IPagination
|
|
72
72
|
|
|
73
73
|
分页类型
|
|
74
74
|
|
|
75
|
-
| 属性名
|
|
76
|
-
| -------- | -------- |
|
|
77
|
-
| pageNo | `number` | ✓
|
|
78
|
-
| pageSize | `number` | ✓
|
|
75
|
+
| 属性名 | 类型 | 必填 | 说明 |
|
|
76
|
+
| -------- | -------- | -- | ---- |
|
|
77
|
+
| pageNo | `number` | ✓ | 当前页码 |
|
|
78
|
+
| pageSize | `number` | ✓ | 每页大小 |
|
|
79
79
|
|
|
80
80
|
##### IPageData<T>
|
|
81
81
|
|
|
@@ -83,10 +83,10 @@ type ElButtonType = 'default' | 'primary' | 'success' | 'info' | 'warning' | 'te
|
|
|
83
83
|
|
|
84
84
|
继承自 `IPagination`
|
|
85
85
|
|
|
86
|
-
| 属性名
|
|
87
|
-
|
|
|
88
|
-
| list
|
|
89
|
-
| count
|
|
86
|
+
| 属性名 | 类型 | 必填 | 说明 |
|
|
87
|
+
| ----- | -------- | -- | ---- |
|
|
88
|
+
| list | `T[]` | ✓ | 数据列表 |
|
|
89
|
+
| count | `number` | ✓ | 数据总数 |
|
|
90
90
|
|
|
91
91
|
**使用示例：**
|
|
92
92
|
|
|
@@ -106,7 +106,7 @@ const userData: IPageData<UserData> = {
|
|
|
106
106
|
}
|
|
107
107
|
```
|
|
108
108
|
|
|
109
|
-
|
|
109
|
+
***
|
|
110
110
|
|
|
111
111
|
### @jnrs/vue-core/pinia 模块
|
|
112
112
|
|
|
@@ -116,17 +116,17 @@ const userData: IPageData<UserData> = {
|
|
|
116
116
|
|
|
117
117
|
**返回值：**
|
|
118
118
|
|
|
119
|
-
| 属性/方法
|
|
120
|
-
| ------------------ | -------------------------------- |
|
|
119
|
+
| 属性/方法 | 类型 | 说明 |
|
|
120
|
+
| ------------------ | -------------------------------- | --------------------- |
|
|
121
121
|
| theme | `Ref<Theme>` | 主题配置（国际化、主题模式、自定义强调色） |
|
|
122
|
-
| computedThemeMode | `ComputedRef<'light' \| 'dark'>` | 计算后的主题模式（考虑 auto 模式）
|
|
123
|
-
| menuCollapse | `Ref<boolean>` | 菜单是否折叠
|
|
124
|
-
| documentFullscreen | `Ref<boolean>` | 文档是否全屏
|
|
125
|
-
| toggleCollapse | `() => void` | 折叠菜单切换
|
|
126
|
-
| toggleFullScreen | `() => Promise<void>` | 全屏切换
|
|
127
|
-
| setLocale | `(value: unknown) => void` | 设置语言
|
|
128
|
-
| setMode | `(value: unknown) => void` | 设置主题模式
|
|
129
|
-
| setPrimaryColor | `(value: unknown) => void` | 设置主题色
|
|
122
|
+
| computedThemeMode | `ComputedRef<'light' \| 'dark'>` | 计算后的主题模式（考虑 auto 模式） |
|
|
123
|
+
| menuCollapse | `Ref<boolean>` | 菜单是否折叠 |
|
|
124
|
+
| documentFullscreen | `Ref<boolean>` | 文档是否全屏 |
|
|
125
|
+
| toggleCollapse | `() => void` | 折叠菜单切换 |
|
|
126
|
+
| toggleFullScreen | `() => Promise<void>` | 全屏切换 |
|
|
127
|
+
| setLocale | `(value: unknown) => void` | 设置语言 |
|
|
128
|
+
| setMode | `(value: unknown) => void` | 设置主题模式 |
|
|
129
|
+
| setPrimaryColor | `(value: unknown) => void` | 设置主题色 |
|
|
130
130
|
|
|
131
131
|
**Theme 类型：**
|
|
132
132
|
|
|
@@ -167,7 +167,7 @@ console.log(systemStore.computedThemeMode.value)
|
|
|
167
167
|
- 支持自动主题模式（根据系统偏好切换）
|
|
168
168
|
- 动态设置 CSS 变量 `--jnrs-color-primary`
|
|
169
169
|
|
|
170
|
-
|
|
170
|
+
***
|
|
171
171
|
|
|
172
172
|
#### Store: useMenuStore
|
|
173
173
|
|
|
@@ -175,12 +175,12 @@ console.log(systemStore.computedThemeMode.value)
|
|
|
175
175
|
|
|
176
176
|
**返回值：**
|
|
177
177
|
|
|
178
|
-
| 属性/方法
|
|
179
|
-
| -------------------- | -------------------------------------------- |
|
|
180
|
-
| hasFetchedAsyncMenus | `Ref<boolean>` | 菜单是否已获取
|
|
181
|
-
| menus | `Ref<IMenuItem[]>` | 菜单项列表
|
|
178
|
+
| 属性/方法 | 类型 | 说明 |
|
|
179
|
+
| -------------------- | -------------------------------------------- | ----------- |
|
|
180
|
+
| hasFetchedAsyncMenus | `Ref<boolean>` | 菜单是否已获取 |
|
|
181
|
+
| menus | `Ref<IMenuItem[]>` | 菜单项列表 |
|
|
182
182
|
| asyncSetMenus | `(res: IMenuItem[]) => Promise<IMenuItem[]>` | 设置菜单信息并生成路由 |
|
|
183
|
-
| clearMenu | `() => void` | 清除菜单信息
|
|
183
|
+
| clearMenu | `() => void` | 清除菜单信息 |
|
|
184
184
|
|
|
185
185
|
**使用示例：**
|
|
186
186
|
|
|
@@ -212,7 +212,7 @@ console.log(menuStore.menus.value)
|
|
|
212
212
|
- 自动调用 `asyncGenerateRoute` 生成动态路由
|
|
213
213
|
- `hasFetchedAsyncMenus` 不持久化，每次刷新页面需重新获取菜单
|
|
214
214
|
|
|
215
|
-
|
|
215
|
+
***
|
|
216
216
|
|
|
217
217
|
### @jnrs/vue-core/router 模块
|
|
218
218
|
|
|
@@ -245,13 +245,13 @@ type FileModules = Record<string, () => Promise<unknown>>
|
|
|
245
245
|
|
|
246
246
|
**参数：**
|
|
247
247
|
|
|
248
|
-
| 参数名
|
|
249
|
-
| ---------------- | -------------------------------------------------- |
|
|
250
|
-
| options | `RouterOptions` | ✓
|
|
251
|
-
| fileModules | `FileModules` | ✓
|
|
252
|
-
| layoutName | `string` | -
|
|
253
|
-
| globalComponent | `Promise<unknown>` | -
|
|
254
|
-
| handleBeforeEach | `(to, from) => Promise<void \| boolean \| string>` | -
|
|
248
|
+
| 参数名 | 类型 | 必填 | 说明 |
|
|
249
|
+
| ---------------- | -------------------------------------------------- | -- | ----------------------------------- |
|
|
250
|
+
| options | `RouterOptions` | ✓ | 路由配置项 |
|
|
251
|
+
| fileModules | `FileModules` | ✓ | 文件模块（通过 import.meta.glob 导入） |
|
|
252
|
+
| layoutName | `string` | - | 布局组件名称 |
|
|
253
|
+
| globalComponent | `Promise<unknown>` | - | 全局 Layout 组件（meta.global=true 时需传入） |
|
|
254
|
+
| handleBeforeEach | `(to, from) => Promise<void \| boolean \| string>` | - | 路由前置守卫处理函数 |
|
|
255
255
|
|
|
256
256
|
**返回值：** `Router` - router 实例
|
|
257
257
|
|
|
@@ -286,10 +286,10 @@ const router = createVueRouter({
|
|
|
286
286
|
|
|
287
287
|
**参数：**
|
|
288
288
|
|
|
289
|
-
| 参数名
|
|
290
|
-
| ------ | ------------- |
|
|
291
|
-
| menus | `IMenuItem[]` | ✓
|
|
292
|
-
| parent | `IMenuItem` | -
|
|
289
|
+
| 参数名 | 类型 | 必填 | 说明 |
|
|
290
|
+
| ------ | ------------- | -- | ------------- |
|
|
291
|
+
| menus | `IMenuItem[]` | ✓ | 菜单项数组 |
|
|
292
|
+
| parent | `IMenuItem` | - | 父级菜单项（内部递归使用） |
|
|
293
293
|
|
|
294
294
|
**返回值：** `Promise<void>`
|
|
295
295
|
|
|
@@ -307,10 +307,10 @@ const router = createVueRouter({
|
|
|
307
307
|
|
|
308
308
|
**参数：**
|
|
309
309
|
|
|
310
|
-
| 参数名
|
|
311
|
-
|
|
|
312
|
-
| to
|
|
313
|
-
| type
|
|
310
|
+
| 参数名 | 类型 | 必填 | 说明 |
|
|
311
|
+
| ---- | --------------------- | -- | -------------- |
|
|
312
|
+
| to | `RouteLocationRaw` | ✓ | 路由跳转参数 |
|
|
313
|
+
| type | `'push' \| 'replace'` | - | 跳转方式，默认 'push' |
|
|
314
314
|
|
|
315
315
|
**返回值：** `Promise<boolean \| void>`
|
|
316
316
|
|
|
@@ -347,7 +347,7 @@ const routes = getRoutes()
|
|
|
347
347
|
console.log(routes)
|
|
348
348
|
```
|
|
349
349
|
|
|
350
|
-
|
|
350
|
+
***
|
|
351
351
|
|
|
352
352
|
### @jnrs/vue-core/components 模块
|
|
353
353
|
|
|
@@ -357,25 +357,25 @@ console.log(routes)
|
|
|
357
357
|
|
|
358
358
|
**Props：**
|
|
359
359
|
|
|
360
|
-
| 属性名
|
|
361
|
-
| ------------------- | -------------------------------- | ---------------------------- |
|
|
362
|
-
| data | `Record<string, any>[]` | — | 表数据
|
|
360
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
361
|
+
| ------------------- | -------------------------------- | ---------------------------- | --------------------------------------------------------------- |
|
|
362
|
+
| data | `Record<string, any>[]` | — | 表数据 |
|
|
363
363
|
| rowKey | `string` | `'id'` | 行数据的 Key，在使用 reserve-selection 功能与显示树形数据时必填。支持多层访问：user.info.id |
|
|
364
|
-
| showScrollbar | `boolean` | `false` | 总是显示横向滚动条
|
|
365
|
-
| height | `string \| number` | `'100%'` | 表格高度
|
|
366
|
-
| autoHeight | `boolean` | `false` | 表格高度是否自动计算
|
|
367
|
-
| autoHeightOptions | `UseReactivityTableHeighOptions` | `{}` | 表格高度自动计算配置项
|
|
368
|
-
| showIndexColumn | `boolean` | `false` | 是否显示序号列
|
|
369
|
-
| showSelectionColumn | `boolean` | `false` | 是否显示选择列
|
|
370
|
-
| showMouseSelection | `boolean` | `false` | 是否开启鼠标框选
|
|
364
|
+
| showScrollbar | `boolean` | `false` | 总是显示横向滚动条 |
|
|
365
|
+
| height | `string \| number` | `'100%'` | 表格高度 |
|
|
366
|
+
| autoHeight | `boolean` | `false` | 表格高度是否自动计算 |
|
|
367
|
+
| autoHeightOptions | `UseReactivityTableHeighOptions` | `{}` | 表格高度自动计算配置项 |
|
|
368
|
+
| showIndexColumn | `boolean` | `false` | 是否显示序号列 |
|
|
369
|
+
| showSelectionColumn | `boolean` | `false` | 是否显示选择列 |
|
|
370
|
+
| showMouseSelection | `boolean` | `false` | 是否开启鼠标框选 |
|
|
371
371
|
| containerClass | `string` | `'jn_table'` | 表格容器类名，用于鼠标框选功能，多个表格时需传入不同类名 |
|
|
372
|
-
| pagination | `IPagination` | `{ pageNo: 0, pageSize: 0 }` | 当前页码和每页大小（用于序号计算）
|
|
373
|
-
| isMainTable | `boolean` | `false` | 是否为主表，启用行选中高亮样式（多栏布局中主表使用）
|
|
372
|
+
| pagination | `IPagination` | `{ pageNo: 0, pageSize: 0 }` | 当前页码和每页大小（用于序号计算） |
|
|
373
|
+
| isMainTable | `boolean` | `false` | 是否为主表，启用行选中高亮样式（多栏布局中主表使用） |
|
|
374
374
|
|
|
375
375
|
**暴露方法 (Exposed)：**
|
|
376
376
|
|
|
377
|
-
| 方法名
|
|
378
|
-
| -------------- | ------------ |
|
|
377
|
+
| 方法名 | 类型 | 说明 |
|
|
378
|
+
| -------------- | ------------ | ------- |
|
|
379
379
|
| clearSelection | `() => void` | 清空所有选中项 |
|
|
380
380
|
|
|
381
381
|
**使用示例：**
|
|
@@ -447,7 +447,7 @@ const tableRowClassName = ({ row }) => {
|
|
|
447
447
|
|
|
448
448
|
> `isMainTable` 启用后，会自动添加行 hover 高亮（`--jnrs-background-hover`）和选中行高亮（`--jnrs-color-primary`）样式，配合 `rowClassName` 实现主表行选中效果。
|
|
449
449
|
|
|
450
|
-
|
|
450
|
+
***
|
|
451
451
|
|
|
452
452
|
#### JnSelectTemplate
|
|
453
453
|
|
|
@@ -455,37 +455,37 @@ const tableRowClassName = ({ row }) => {
|
|
|
455
455
|
|
|
456
456
|
**Props：**
|
|
457
457
|
|
|
458
|
-
| 属性名
|
|
459
|
-
| --------------------- | -------------------------------------------------------------------------- | ---------------------------- |
|
|
460
|
-
| listApi | `Function` | — | 列表接口（必填）
|
|
461
|
-
| tableName | `string` | `''` | 列表名称
|
|
462
|
-
| tableWidth | `string` | `'60%'` | 列表宽度
|
|
463
|
-
| listParams | `Record<string, unknown>` | `{}` | 列表查询参数
|
|
464
|
-
| listParamsHandle | `(params) => params` | `(params) => params` | 列表查询参数前置处理函数
|
|
465
|
-
| listParamsHandleAfter | `(params) => params` | `(params) => params` | 列表查询参数后置处理函数
|
|
466
|
-
| keyValue | `{ name: string; id: string; [key: string]: string }` | `{ name: 'name', id: 'id' }` | 真实数据匹配的键值对名
|
|
467
|
-
| optionSecondaryField | `string` | — | keyValue 的拓展字段，用于 el-option 中显示
|
|
468
|
-
| modelValue | `Record<string, unknown> \| Record<string, unknown>[] \| number \| string` | — | 双向绑定值（支持多种类型）
|
|
469
|
-
| width | `string` | `'100%'` | 宽度
|
|
470
|
-
| simpleValue | `boolean` | `true` | 简单数据类型，仅返回 keyValue.id
|
|
471
|
-
| showAllTips | `boolean` | `false` | option 组件是否显示 [全部]
|
|
472
|
-
| onlyOption | `boolean` | `false` | 仅显示选择器
|
|
473
|
-
| onlyButton | `boolean` | `false` | 仅显示选择按钮
|
|
474
|
-
| filterable | `boolean` | `true` | 是否可筛选
|
|
475
|
-
| clearable | `boolean` | `true` | 是否可清空
|
|
476
|
-
| buttonDialogText | `string` | `'更多'`
|
|
477
|
-
| size | `ElSize` | `'default'` | 按钮大小
|
|
478
|
-
| plain | `boolean` | `true` | 按钮 plain
|
|
479
|
-
| formRef | `FormInstance` | `null` | 父级组件的表单对象
|
|
480
|
-
| validateFieldName | `string` | `''` | 父级表单验证的字段名
|
|
481
|
-
| limit | `number` | `1` | 可选择的数量
|
|
482
|
-
| queryForm | `Record<string, unknown>` | — | 表单查询参数
|
|
483
|
-
| initialParams | `Record<string, unknown>` | — | 初始查询参数
|
|
484
|
-
| remoteFilterKey | `string` | `'name'` | 下拉框查询参数远程过滤参数的 key 值
|
|
485
|
-
| collapseTags | `boolean` | `true` | 是否折叠标签
|
|
486
|
-
| maxCollapseTags | `number` | `1` | 折叠时显示的最大标签数
|
|
458
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
459
|
+
| --------------------- | -------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------- |
|
|
460
|
+
| listApi | `Function` | — | 列表接口（必填） |
|
|
461
|
+
| tableName | `string` | `''` | 列表名称 |
|
|
462
|
+
| tableWidth | `string` | `'60%'` | 列表宽度 |
|
|
463
|
+
| listParams | `Record<string, unknown>` | `{}` | 列表查询参数 |
|
|
464
|
+
| listParamsHandle | `(params) => params` | `(params) => params` | 列表查询参数前置处理函数 |
|
|
465
|
+
| listParamsHandleAfter | `(params) => params` | `(params) => params` | 列表查询参数后置处理函数 |
|
|
466
|
+
| keyValue | `{ name: string; id: string; [key: string]: string }` | `{ name: 'name', id: 'id' }` | 真实数据匹配的键值对名 |
|
|
467
|
+
| optionSecondaryField | `string` | — | keyValue 的拓展字段，用于 el-option 中显示 |
|
|
468
|
+
| modelValue | `Record<string, unknown> \| Record<string, unknown>[] \| number \| string` | — | 双向绑定值（支持多种类型） |
|
|
469
|
+
| width | `string` | `'100%'` | 宽度 |
|
|
470
|
+
| simpleValue | `boolean` | `true` | 简单数据类型，仅返回 keyValue.id |
|
|
471
|
+
| showAllTips | `boolean` | `false` | option 组件是否显示 \[全部] |
|
|
472
|
+
| onlyOption | `boolean` | `false` | 仅显示选择器 |
|
|
473
|
+
| onlyButton | `boolean` | `false` | 仅显示选择按钮 |
|
|
474
|
+
| filterable | `boolean` | `true` | 是否可筛选 |
|
|
475
|
+
| clearable | `boolean` | `true` | 是否可清空 |
|
|
476
|
+
| buttonDialogText | `string` | `'更多'` | 按钮文字 |
|
|
477
|
+
| size | `ElSize` | `'default'` | 按钮大小 |
|
|
478
|
+
| plain | `boolean` | `true` | 按钮 plain |
|
|
479
|
+
| formRef | `FormInstance` | `null` | 父级组件的表单对象 |
|
|
480
|
+
| validateFieldName | `string` | `''` | 父级表单验证的字段名 |
|
|
481
|
+
| limit | `number` | `1` | 可选择的数量 |
|
|
482
|
+
| queryForm | `Record<string, unknown>` | — | 表单查询参数 |
|
|
483
|
+
| initialParams | `Record<string, unknown>` | — | 初始查询参数 |
|
|
484
|
+
| remoteFilterKey | `string` | `'name'` | 下拉框查询参数远程过滤参数的 key 值 |
|
|
485
|
+
| collapseTags | `boolean` | `true` | 是否折叠标签 |
|
|
486
|
+
| maxCollapseTags | `number` | `1` | 折叠时显示的最大标签数 |
|
|
487
487
|
| immediate | `boolean` | `false` | 是否在 onMounted 期间立即请求列表（默认懒加载：下拉展开/弹窗显示时才请求） |
|
|
488
|
-
| pageSize | `number` | `100` | 每页条数
|
|
488
|
+
| pageSize | `number` | `100` | 每页条数 |
|
|
489
489
|
|
|
490
490
|
**使用示例：**
|
|
491
491
|
|
|
@@ -508,7 +508,7 @@ const selectedUser = ref(null)
|
|
|
508
508
|
</script>
|
|
509
509
|
```
|
|
510
510
|
|
|
511
|
-
|
|
511
|
+
***
|
|
512
512
|
|
|
513
513
|
#### JnPdfView
|
|
514
514
|
|
|
@@ -516,13 +516,13 @@ PDF 文件预览组件
|
|
|
516
516
|
|
|
517
517
|
**Props：**
|
|
518
518
|
|
|
519
|
-
| 属性名
|
|
520
|
-
| ------------ | ------------- | ------- |
|
|
521
|
-
| fileList | `IFileItem[]` | `[]` | 文件列表
|
|
522
|
-
| showFileName | `boolean` | `true` | 是否显示文件名
|
|
519
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
520
|
+
| ------------ | ------------- | ------- | ----------------------------- |
|
|
521
|
+
| fileList | `IFileItem[]` | `[]` | 文件列表 |
|
|
522
|
+
| showFileName | `boolean` | `true` | 是否显示文件名 |
|
|
523
523
|
| isPdf | `boolean` | `false` | 是否是 pdf 文件（pdf 文件直接预览，其他文件下载） |
|
|
524
|
-
| windowWidth | `number` | `800` | 预览窗口宽度
|
|
525
|
-
| windowHeight | `number` | `600` | 预览窗口高度
|
|
524
|
+
| windowWidth | `number` | `800` | 预览窗口宽度 |
|
|
525
|
+
| windowHeight | `number` | `600` | 预览窗口高度 |
|
|
526
526
|
|
|
527
527
|
**使用示例：**
|
|
528
528
|
|
|
@@ -532,7 +532,7 @@ PDF 文件预览组件
|
|
|
532
532
|
</template>
|
|
533
533
|
```
|
|
534
534
|
|
|
535
|
-
|
|
535
|
+
***
|
|
536
536
|
|
|
537
537
|
#### JnPagination
|
|
538
538
|
|
|
@@ -540,13 +540,13 @@ PDF 文件预览组件
|
|
|
540
540
|
|
|
541
541
|
**Props：**
|
|
542
542
|
|
|
543
|
-
| 属性名
|
|
544
|
-
| ---------- | --------------- | ----------------------------- |
|
|
545
|
-
| modelValue | `IPagination` | `{ pageNo: 1, pageSize: 20 }` | 分页模型值
|
|
546
|
-
| total | `number` | `0` | 总条数
|
|
547
|
-
| size | `ComponentSize` | `'small'` | 按钮尺寸
|
|
543
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
544
|
+
| ---------- | --------------- | ----------------------------- | ------ |
|
|
545
|
+
| modelValue | `IPagination` | `{ pageNo: 1, pageSize: 20 }` | 分页模型值 |
|
|
546
|
+
| total | `number` | `0` | 总条数 |
|
|
547
|
+
| size | `ComponentSize` | `'small'` | 按钮尺寸 |
|
|
548
548
|
| background | `boolean` | `true` | 是否带背景色 |
|
|
549
|
-
| marginTop | `string` | `'10px'` | 上边距
|
|
549
|
+
| marginTop | `string` | `'10px'` | 上边距 |
|
|
550
550
|
|
|
551
551
|
**Events：**
|
|
552
552
|
|
|
@@ -570,7 +570,7 @@ const handlePageChange = (newPagination) => {
|
|
|
570
570
|
</script>
|
|
571
571
|
```
|
|
572
572
|
|
|
573
|
-
|
|
573
|
+
***
|
|
574
574
|
|
|
575
575
|
#### JnImportAndExport
|
|
576
576
|
|
|
@@ -578,27 +578,27 @@ const handlePageChange = (newPagination) => {
|
|
|
578
578
|
|
|
579
579
|
**Props：**
|
|
580
580
|
|
|
581
|
-
| 属性名
|
|
582
|
-
| --------------------------- | ------------------------------------------------------- | ------------------------------------ |
|
|
581
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
582
|
+
| --------------------------- | ------------------------------------------------------- | ------------------------------------ | ---------------------- |
|
|
583
583
|
| importTemplateApi | `() => Promise<IBlobItem>` | — | 下载导入模板文件的 api 函数 |
|
|
584
|
-
| importApi | `(data: FormData) => Promise<IFullResponse>` | — | 数据导入 api 函数
|
|
585
|
-
| importFieldName | `string` | `'file'` | 数据导入的字段名
|
|
586
|
-
| importParams | `Record<string, unknown>` | — | 导入的参数
|
|
587
|
-
| fileUploadConfig | `{ accept: string; limit: number }` | `{ accept: '.xls,.xlsx', limit: 1 }` | 导入的文件上传配置
|
|
588
|
-
| importBtnName | `string` | `'导入'`
|
|
589
|
-
| importDisabled | `boolean` | `false` | 是否禁用导入按钮
|
|
590
|
-
| exportApi | `(data: Record<string, unknown>) => Promise<IBlobItem>` | — | 数据导出的 api 函数
|
|
591
|
-
| exportParams | `Record<string, unknown>` | — | 导出的参数
|
|
584
|
+
| importApi | `(data: FormData) => Promise<IFullResponse>` | — | 数据导入 api 函数 |
|
|
585
|
+
| importFieldName | `string` | `'file'` | 数据导入的字段名 |
|
|
586
|
+
| importParams | `Record<string, unknown>` | — | 导入的参数 |
|
|
587
|
+
| fileUploadConfig | `{ accept: string; limit: number }` | `{ accept: '.xls,.xlsx', limit: 1 }` | 导入的文件上传配置 |
|
|
588
|
+
| importBtnName | `string` | `'导入'` | 导入的按钮名称 |
|
|
589
|
+
| importDisabled | `boolean` | `false` | 是否禁用导入按钮 |
|
|
590
|
+
| exportApi | `(data: Record<string, unknown>) => Promise<IBlobItem>` | — | 数据导出的 api 函数 |
|
|
591
|
+
| exportParams | `Record<string, unknown>` | — | 导出的参数 |
|
|
592
592
|
| exportDynamicParamsConfig | `{ label: string; prop: string }` | — | 导出操作时，MessageBox 的参数配置 |
|
|
593
|
-
| messageBoxInputPattern | `RegExp` | `/^\S+(?:\s+\S+)*$/` | MessageBox 中输入框的校验表达式
|
|
594
|
-
| messageBoxInputErrorMessage | `string` | `'请输入参数'`
|
|
595
|
-
| exportBtnName | `string` | `'导出'`
|
|
596
|
-
| exportDisabled | `boolean` | `false` | 是否禁用导出按钮
|
|
597
|
-
| size | `ElSize` | `'default'` | 按钮尺寸
|
|
598
|
-
| buttonType | `ElButtonType` | `'primary'` | 按钮类型
|
|
599
|
-
| plain | `boolean` | `true` | 是否为朴素按钮
|
|
600
|
-
| text | `boolean` | `false` | 是否为文字按钮
|
|
601
|
-
| icon | `boolean` | `true` | 是否显示图标
|
|
593
|
+
| messageBoxInputPattern | `RegExp` | `/^\S+(?:\s+\S+)*$/` | MessageBox 中输入框的校验表达式 |
|
|
594
|
+
| messageBoxInputErrorMessage | `string` | `'请输入参数'` | 校验未通过时的提示文本 |
|
|
595
|
+
| exportBtnName | `string` | `'导出'` | 导出的按钮名称 |
|
|
596
|
+
| exportDisabled | `boolean` | `false` | 是否禁用导出按钮 |
|
|
597
|
+
| size | `ElSize` | `'default'` | 按钮尺寸 |
|
|
598
|
+
| buttonType | `ElButtonType` | `'primary'` | 按钮类型 |
|
|
599
|
+
| plain | `boolean` | `true` | 是否为朴素按钮 |
|
|
600
|
+
| text | `boolean` | `false` | 是否为文字按钮 |
|
|
601
|
+
| icon | `boolean` | `true` | 是否显示图标 |
|
|
602
602
|
|
|
603
603
|
**使用示例：**
|
|
604
604
|
|
|
@@ -617,7 +617,7 @@ import { downloadTemplate, importData, exportData } from '@/api/data'
|
|
|
617
617
|
</script>
|
|
618
618
|
```
|
|
619
619
|
|
|
620
|
-
|
|
620
|
+
***
|
|
621
621
|
|
|
622
622
|
#### JnImageView
|
|
623
623
|
|
|
@@ -625,15 +625,15 @@ import { downloadTemplate, importData, exportData } from '@/api/data'
|
|
|
625
625
|
|
|
626
626
|
**Props：**
|
|
627
627
|
|
|
628
|
-
| 属性名
|
|
629
|
-
| -------------- | ------------- | ------- |
|
|
630
|
-
| src | `string` | `''` | 图片源地址
|
|
631
|
-
| previewSrcList | `IFileItem[]` | `[]` | 开启图片预览功能
|
|
632
|
-
| preview | `boolean` | `false` | 是否开启预览功能
|
|
633
|
-
| height | `string` | — | 图片高度
|
|
634
|
-
| maxHeight | `string` | — | 图片最大高度
|
|
635
|
-
| width | `string` | — | 图片宽度
|
|
636
|
-
| maxWidth | `string` | — | 图片最大宽度
|
|
628
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
629
|
+
| -------------- | ------------- | ------- | ----------------------------------------------------- |
|
|
630
|
+
| src | `string` | `''` | 图片源地址 |
|
|
631
|
+
| previewSrcList | `IFileItem[]` | `[]` | 开启图片预览功能 |
|
|
632
|
+
| preview | `boolean` | `false` | 是否开启预览功能 |
|
|
633
|
+
| height | `string` | — | 图片高度 |
|
|
634
|
+
| maxHeight | `string` | — | 图片最大高度 |
|
|
635
|
+
| width | `string` | — | 图片宽度 |
|
|
636
|
+
| maxWidth | `string` | — | 图片最大宽度 |
|
|
637
637
|
| showAll | `boolean` | `false` | 是否展示所有图片（flex 排列，gap 4px，可换行，点击时 initial-index 为该图索引） |
|
|
638
638
|
|
|
639
639
|
**使用示例：**
|
|
@@ -644,7 +644,7 @@ import { downloadTemplate, importData, exportData } from '@/api/data'
|
|
|
644
644
|
</template>
|
|
645
645
|
```
|
|
646
646
|
|
|
647
|
-
|
|
647
|
+
***
|
|
648
648
|
|
|
649
649
|
#### JnFileUpload
|
|
650
650
|
|
|
@@ -652,22 +652,22 @@ import { downloadTemplate, importData, exportData } from '@/api/data'
|
|
|
652
652
|
|
|
653
653
|
**Props：**
|
|
654
654
|
|
|
655
|
-
| 属性名
|
|
656
|
-
| ----------------- | --------------------------------------- | --------- |
|
|
657
|
-
| modelValue | `MixedUploadFile[]` | — | 绑定的模型值（文件列表）
|
|
658
|
-
| uploadName | `string` | `'file'` | 上传的文件字段名
|
|
659
|
-
| drag | `boolean` | `false` | 是否启用拖拽上传
|
|
660
|
-
| disabled | `boolean` | `false` | 是否禁用
|
|
661
|
-
| showFileList | `boolean` | `true` | 是否显示已上传文件列表
|
|
662
|
-
| accept | `string` | `''` | 接受的文件类型（如 .xls,.xlsx）
|
|
663
|
-
| fileSizeMb | `number` | `100` | 单个文件大小限制（单位：MB）
|
|
664
|
-
| limit | `number` | `0` | 最大上传文件数量，0 表示不限制
|
|
665
|
-
| size | `'' \| 'small' \| 'default' \| 'large'` | `'small'` | Element Plus 组件的尺寸
|
|
666
|
-
| formRef | `FormInstance` | — | 父级组件的表单引用
|
|
667
|
-
| validateFieldName | `string` | `''` | 父级表单中用于校验的字段名
|
|
668
|
-
| downloadFileFn | `(data: IAttachment) => void` | — | 文件下载的函数
|
|
669
|
-
| autoUploadApi | `(data: File) => void` | — | 自动上传文件的 api 函数
|
|
670
|
-
| previewFileFn | `(data: IAttachment) => void` | — | 文件预览函数（仅对 pdf 文件显示预览按钮）
|
|
655
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
656
|
+
| ----------------- | --------------------------------------- | --------- | -------------------------------- |
|
|
657
|
+
| modelValue | `MixedUploadFile[]` | — | 绑定的模型值（文件列表） |
|
|
658
|
+
| uploadName | `string` | `'file'` | 上传的文件字段名 |
|
|
659
|
+
| drag | `boolean` | `false` | 是否启用拖拽上传 |
|
|
660
|
+
| disabled | `boolean` | `false` | 是否禁用 |
|
|
661
|
+
| showFileList | `boolean` | `true` | 是否显示已上传文件列表 |
|
|
662
|
+
| accept | `string` | `''` | 接受的文件类型（如 .xls,.xlsx） |
|
|
663
|
+
| fileSizeMb | `number` | `100` | 单个文件大小限制（单位：MB） |
|
|
664
|
+
| limit | `number` | `0` | 最大上传文件数量，0 表示不限制 |
|
|
665
|
+
| size | `'' \| 'small' \| 'default' \| 'large'` | `'small'` | Element Plus 组件的尺寸 |
|
|
666
|
+
| formRef | `FormInstance` | — | 父级组件的表单引用 |
|
|
667
|
+
| validateFieldName | `string` | `''` | 父级表单中用于校验的字段名 |
|
|
668
|
+
| downloadFileFn | `(data: IAttachment) => void` | — | 文件下载的函数 |
|
|
669
|
+
| autoUploadApi | `(data: File) => void` | — | 自动上传文件的 api 函数 |
|
|
670
|
+
| previewFileFn | `(data: IAttachment) => void` | — | 文件预览函数（仅对 pdf 文件显示预览按钮） |
|
|
671
671
|
| readonly | `boolean` | `false` | 是否只读模式（仅展示文件列表，隐藏上传按钮、上传提示与删除按钮） |
|
|
672
672
|
|
|
673
673
|
**使用示例：**
|
|
@@ -691,7 +691,7 @@ const fileList = ref([])
|
|
|
691
691
|
</script>
|
|
692
692
|
```
|
|
693
693
|
|
|
694
|
-
|
|
694
|
+
***
|
|
695
695
|
|
|
696
696
|
#### JnDialog
|
|
697
697
|
|
|
@@ -699,10 +699,10 @@ const fileList = ref([])
|
|
|
699
699
|
|
|
700
700
|
**Props：**
|
|
701
701
|
|
|
702
|
-
| 属性名
|
|
703
|
-
|
|
|
704
|
-
| title
|
|
705
|
-
| width
|
|
702
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
703
|
+
| ----- | ------------------ | ------- | ------ |
|
|
704
|
+
| title | `string` | `''` | 对话框的标题 |
|
|
705
|
+
| width | `string \| number` | `'50%'` | 对话框的宽度 |
|
|
706
706
|
|
|
707
707
|
**Slots：**
|
|
708
708
|
|
|
@@ -726,7 +726,7 @@ const dialogVisible = ref(false)
|
|
|
726
726
|
</script>
|
|
727
727
|
```
|
|
728
728
|
|
|
729
|
-
|
|
729
|
+
***
|
|
730
730
|
|
|
731
731
|
#### JnDatetime
|
|
732
732
|
|
|
@@ -734,10 +734,10 @@ const dialogVisible = ref(false)
|
|
|
734
734
|
|
|
735
735
|
**Props：**
|
|
736
736
|
|
|
737
|
-
| 属性名
|
|
738
|
-
|
|
|
739
|
-
| value
|
|
740
|
-
| color
|
|
737
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
738
|
+
| ----- | -------- | ---- | ------------------- |
|
|
739
|
+
| value | `string` | `''` | 时间字符串（支持 ISO 或空格分隔） |
|
|
740
|
+
| color | `string` | `''` | 文字颜色 |
|
|
741
741
|
|
|
742
742
|
**使用示例：**
|
|
743
743
|
|
|
@@ -747,34 +747,29 @@ const dialogVisible = ref(false)
|
|
|
747
747
|
</template>
|
|
748
748
|
```
|
|
749
749
|
|
|
750
|
-
|
|
750
|
+
***
|
|
751
751
|
|
|
752
752
|
#### JnDateQuery
|
|
753
753
|
|
|
754
|
-
通用时间查询组件，通过 `
|
|
754
|
+
通用时间查询组件，通过 `isRange` prop 控制范围模式或单值模式，类型选项由组件内部根据 `isRange` 自动配置（不可由用户自定义）。通过 `switcherStyle` 是否有值控制是否显示类型切换器，配合左右箭头快捷按钮实现前后时间段快速导航。`showDefault=true` 时组件初始化自动设置当天为默认值。
|
|
755
755
|
|
|
756
|
-
- `
|
|
757
|
-
- `
|
|
758
|
-
- `valueFormat` 仅对 `
|
|
756
|
+
- `isRange=true`（默认）：typeOptions 为 `['daterange','week','month','year']`，modelValue 始终为 `[string, string]`。默认类型为 `daterange`。month/year 选择器为单选，组件自动展开为 `[月初,月末]`/`[年初,年末]`。
|
|
757
|
+
- `isRange=false`：typeOptions 为 `['date','month','year']`，modelValue 为 `string`。默认类型为 `date`。
|
|
758
|
+
- `valueFormat` 仅对 `isRange=true` 的所有类型最终 modelValue，或 `isRange=false` 的 `date` 类型有效。`isRange=false` 的 month/year 使用各自默认格式（`YYYY-MM`/`YYYY`）。
|
|
759
759
|
|
|
760
760
|
**Props：**
|
|
761
761
|
|
|
762
762
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
763
763
|
| ---------------- | ----------------------------------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
764
|
-
| modelValue | `string \| [string, string]` | — | v-model 绑定值（`
|
|
765
|
-
|
|
|
766
|
-
|
|
|
767
|
-
|
|
|
768
|
-
|
|
|
769
|
-
| valueFormat | `string` | `'YYYY-MM-DD'` | 日期格式（仅对 `range=true` 所有类型最终 modelValue，或 `range=false` 的 date 有效） |
|
|
770
|
-
| clearable | `boolean` | `false` | 是否可清除 |
|
|
764
|
+
| modelValue | `string \| [string, string]` | — | v-model 绑定值（`isRange=true` 为 [string, string]；`isRange=false` 为 string） |
|
|
765
|
+
| switcherStyle | `'select' \| 'button-group' \| ''` | `'button-group'` | 切换器风格，有值时显示切换器，为空时不显示 |
|
|
766
|
+
| quickButtons | `boolean` | `true` | 是否显示左右箭头快捷按钮（不支持 daterange） |
|
|
767
|
+
| valueFormat | `string` | `'YYYY-MM-DD'` | 日期格式（仅对 `isRange=true` 所有类型最终 modelValue，或 `isRange=false` 的 date 有效） |
|
|
768
|
+
| clearable | `boolean` | `false` | 是否可清除 |
|
|
771
769
|
| size | `'' \| 'small' \| 'default' \| 'large'` | `'default'` | 尺寸 |
|
|
772
|
-
|
|
|
773
|
-
|
|
|
774
|
-
|
|
|
775
|
-
| rangeSeparator | `string` | `''`（i18n 提供） | 范围分隔符 |
|
|
776
|
-
| range | `boolean` | `true` | 是否启用范围模式。`true`：typeOptions 为 `['daterange','week','month','year']`；`false`：typeOptions 为 `['date','month','year']` |
|
|
777
|
-
| showDefault | `boolean` | `true` | 是否在 modelValue 为空时自动设置默认值为当天 |
|
|
770
|
+
| rangeSeparator | `string` | `''`（i18n 提供） | 范围分隔符 |
|
|
771
|
+
| isRange | `boolean` | `true` | 是否启用范围模式。`true`：typeOptions 为 `['daterange','week','month','year']`；`false`：typeOptions 为 `['date','month','year']` |
|
|
772
|
+
| showDefault | `boolean` | `true` | 是否在 modelValue 为空时自动设置默认值为当天 |
|
|
778
773
|
|
|
779
774
|
**Events：**
|
|
780
775
|
|
|
@@ -782,19 +777,13 @@ const dialogVisible = ref(false)
|
|
|
782
777
|
- `change` - 值变化时触发，参数为 `(value, type)`
|
|
783
778
|
- `type-change` - 类型切换时触发，参数为 `(type)`
|
|
784
779
|
|
|
785
|
-
**使用示例：时间查询（
|
|
780
|
+
**使用示例：时间查询（isRange 模式，推荐）**
|
|
786
781
|
|
|
787
782
|
```vue
|
|
788
783
|
<template>
|
|
789
784
|
<JnDateQuery
|
|
790
785
|
v-model="dateValue"
|
|
791
|
-
show-type-switcher
|
|
792
|
-
switcher-style="button-group"
|
|
793
|
-
quick-buttons="arrows"
|
|
794
786
|
value-format="YYYY-MM-DD"
|
|
795
|
-
placeholder="选择日期"
|
|
796
|
-
start-placeholder="开始日期"
|
|
797
|
-
end-placeholder="结束日期"
|
|
798
787
|
@change="handleDateQueryChange"
|
|
799
788
|
/>
|
|
800
789
|
</template>
|
|
@@ -812,7 +801,7 @@ const handleDateQueryChange = (val: string | [string, string]) => {
|
|
|
812
801
|
|
|
813
802
|
> 完整案例参见模板工程 `src/views/examples/playground/index.vue` 中的「JnDateQuery 时间查询」章节。
|
|
814
803
|
|
|
815
|
-
|
|
804
|
+
***
|
|
816
805
|
|
|
817
806
|
#### GlobalSetting
|
|
818
807
|
|
|
@@ -820,7 +809,7 @@ const handleDateQueryChange = (val: string | [string, string]) => {
|
|
|
820
809
|
|
|
821
810
|
**说明：** 该组件通常用于系统设置页面，提供语言、主题、主题色等配置的 UI 界面。
|
|
822
811
|
|
|
823
|
-
|
|
812
|
+
***
|
|
824
813
|
|
|
825
814
|
### @jnrs/vue-core/composables 模块
|
|
826
815
|
|
|
@@ -830,16 +819,16 @@ const handleDateQueryChange = (val: string | [string, string]) => {
|
|
|
830
819
|
|
|
831
820
|
**参数：**
|
|
832
821
|
|
|
833
|
-
| 参数名
|
|
834
|
-
| -------------- | ---------------------------- | ----------------- |
|
|
835
|
-
| containerClass | `string` | `'jn_table'` | 表格或容器类名，多个表格时需传入不同类名
|
|
836
|
-
| rowClass | `string` | `'el-table__row'` | 表格行类名
|
|
837
|
-
| callback | `(row: HTMLElement) => void` | `handleSelection` | 框选后的回调，默认处理 input[type='checkbox'] 元素 |
|
|
822
|
+
| 参数名 | 类型 | 默认值 | 说明 |
|
|
823
|
+
| -------------- | ---------------------------- | ----------------- | -------------------------------------- |
|
|
824
|
+
| containerClass | `string` | `'jn_table'` | 表格或容器类名，多个表格时需传入不同类名 |
|
|
825
|
+
| rowClass | `string` | `'el-table__row'` | 表格行类名 |
|
|
826
|
+
| callback | `(row: HTMLElement) => void` | `handleSelection` | 框选后的回调，默认处理 input\[type='checkbox'] 元素 |
|
|
838
827
|
|
|
839
828
|
**返回值：**
|
|
840
829
|
|
|
841
|
-
| 返回值
|
|
842
|
-
| --------------- | ----------------------------- |
|
|
830
|
+
| 返回值 | 类型 | 说明 |
|
|
831
|
+
| --------------- | ----------------------------- | ---------- |
|
|
843
832
|
| handleMouseDown | `(event: MouseEvent) => void` | 鼠标按下事件处理函数 |
|
|
844
833
|
|
|
845
834
|
**使用示例：**
|
|
@@ -867,7 +856,7 @@ const handleSelectionChange = (selection) => {
|
|
|
867
856
|
</script>
|
|
868
857
|
```
|
|
869
858
|
|
|
870
|
-
|
|
859
|
+
***
|
|
871
860
|
|
|
872
861
|
#### useReactivityTableHeight
|
|
873
862
|
|
|
@@ -875,15 +864,15 @@ const handleSelectionChange = (selection) => {
|
|
|
875
864
|
|
|
876
865
|
**参数：**
|
|
877
866
|
|
|
878
|
-
| 参数名
|
|
879
|
-
| --------- | -------- | ------------ |
|
|
867
|
+
| 参数名 | 类型 | 默认值 | 说明 |
|
|
868
|
+
| --------- | -------- | ------------ | ---- |
|
|
880
869
|
| className | `string` | `'el-table'` | 表格类名 |
|
|
881
870
|
| bottomGap | `number` | `77` | 底部间隔 |
|
|
882
871
|
|
|
883
872
|
**返回值：**
|
|
884
873
|
|
|
885
|
-
| 返回值
|
|
886
|
-
| --------- | ------------- |
|
|
874
|
+
| 返回值 | 类型 | 说明 |
|
|
875
|
+
| --------- | ------------- | ------ |
|
|
887
876
|
| maxHeight | `Ref<number>` | 表格最大高度 |
|
|
888
877
|
|
|
889
878
|
**UseReactivityTableHeightOptions 类型：**
|
|
@@ -920,7 +909,7 @@ const { maxHeight } = useReactivityTableHeight({
|
|
|
920
909
|
- 防抖处理（300ms）
|
|
921
910
|
- 支持 keep-alive 缓存组件
|
|
922
911
|
|
|
923
|
-
|
|
912
|
+
***
|
|
924
913
|
|
|
925
914
|
#### useWebSocket
|
|
926
915
|
|
|
@@ -928,16 +917,16 @@ WebSocket 封装（支持心跳机制）
|
|
|
928
917
|
|
|
929
918
|
**参数：**
|
|
930
919
|
|
|
931
|
-
| 参数名
|
|
932
|
-
| ------------------------- | ------------------------ | ------- |
|
|
933
|
-
| url | `string` | — | WebSocket 地址
|
|
934
|
-
| connectionTimeoutDuration | `number` | `60000` | 网络超时时间（ms）
|
|
935
|
-
| token | `string` | — | 认证信息
|
|
920
|
+
| 参数名 | 类型 | 默认值 | 说明 |
|
|
921
|
+
| ------------------------- | ------------------------ | ------- | ------------ |
|
|
922
|
+
| url | `string` | — | WebSocket 地址 |
|
|
923
|
+
| connectionTimeoutDuration | `number` | `60000` | 网络超时时间（ms） |
|
|
924
|
+
| token | `string` | — | 认证信息 |
|
|
936
925
|
| heartbeat | `boolean` | `false` | 是否启用心跳 |
|
|
937
926
|
| heartbeatInterval | `number` | `30000` | 心跳间隔（ms） |
|
|
938
|
-
| heartbeatTimeout | `number` | `10000` | 心跳超时时间（ms）
|
|
939
|
-
| showLog | `boolean` | `false` | 是否打印控制台信息
|
|
940
|
-
| showMessage | `boolean` | `true` | 是否显示消息弹框
|
|
927
|
+
| heartbeatTimeout | `number` | `10000` | 心跳超时时间（ms） |
|
|
928
|
+
| showLog | `boolean` | `false` | 是否打印控制台信息 |
|
|
929
|
+
| showMessage | `boolean` | `true` | 是否显示消息弹框 |
|
|
941
930
|
| onOpen | `() => void` | — | 连接成功回调 |
|
|
942
931
|
| onMessage | `(data) => void` | — | 收到消息回调 |
|
|
943
932
|
| onClose | `() => void` | — | 连接关闭回调 |
|
|
@@ -945,14 +934,14 @@ WebSocket 封装（支持心跳机制）
|
|
|
945
934
|
|
|
946
935
|
**返回值：**
|
|
947
936
|
|
|
948
|
-
| 返回值
|
|
949
|
-
| -------------- | ------------------------- |
|
|
937
|
+
| 返回值 | 类型 | 说明 |
|
|
938
|
+
| -------------- | ------------------------- | ------------ |
|
|
950
939
|
| ws | `Ref<WebSocket \| null>` | WebSocket 实例 |
|
|
951
|
-
| isLoading | `Ref<boolean>` | 是否正在加载中
|
|
952
|
-
| isConnected | `Ref<boolean>` | 是否已连接
|
|
953
|
-
| wsStateInfo | `Ref<string>` | 连接状态信息
|
|
954
|
-
| sendMessage | `(data: unknown) => void` | 发送消息函数
|
|
955
|
-
| closeWebSocket | `() => void` | 关闭连接函数
|
|
940
|
+
| isLoading | `Ref<boolean>` | 是否正在加载中 |
|
|
941
|
+
| isConnected | `Ref<boolean>` | 是否已连接 |
|
|
942
|
+
| wsStateInfo | `Ref<string>` | 连接状态信息 |
|
|
943
|
+
| sendMessage | `(data: unknown) => void` | 发送消息函数 |
|
|
944
|
+
| closeWebSocket | `() => void` | 关闭连接函数 |
|
|
956
945
|
|
|
957
946
|
**使用示例：**
|
|
958
947
|
|
|
@@ -995,7 +984,7 @@ closeWebSocket()
|
|
|
995
984
|
- 支持组件激活/停用时自动管理连接
|
|
996
985
|
- 自动清理资源
|
|
997
986
|
|
|
998
|
-
|
|
987
|
+
***
|
|
999
988
|
|
|
1000
989
|
## 🔍 完整使用示例
|
|
1001
990
|
|
|
@@ -1039,7 +1028,7 @@ const { maxHeight } = useReactivityTableHeight()
|
|
|
1039
1028
|
const { sendMessage } = useWebSocket({ url: 'ws://localhost:8080' })
|
|
1040
1029
|
```
|
|
1041
1030
|
|
|
1042
|
-
|
|
1031
|
+
***
|
|
1043
1032
|
|
|
1044
1033
|
## 📝 注意事项
|
|
1045
1034
|
|
|
@@ -1051,7 +1040,7 @@ const { sendMessage } = useWebSocket({ url: 'ws://localhost:8080' })
|
|
|
1051
1040
|
6. **鼠标框选**：`useMouseSelection` 需要在表格上绑定 `@mousedown` 事件
|
|
1052
1041
|
7. **类型安全**：所有导出均提供完整的 TypeScript 类型定义
|
|
1053
1042
|
|
|
1054
|
-
|
|
1043
|
+
***
|
|
1055
1044
|
|
|
1056
1045
|
## 📄 License
|
|
1057
1046
|
|