@bscjc/webui 0.0.2 → 0.0.3
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/README.md +53 -53
- package/dist/es/index.mjs +534 -1653
- package/dist/es/index.mjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/lib/index.cjs +7 -7
- package/dist/lib/index.cjs.map +1 -1
- package/dist/types/components/JcDatePicker/index.d.ts +4 -0
- package/dist/types/components/JcDatePicker/index.vue.d.ts +4 -0
- package/dist/types/components/JcInputComplex/index.d.ts +33 -10
- package/dist/types/components/JcInputComplex/index.vue.d.ts +33 -10
- package/dist/types/components/JcInputSwitch/index.d.ts +25 -2
- package/dist/types/components/JcInputSwitch/index.vue.d.ts +25 -2
- package/dist/types/components/JcMoreQueryContain/index.d.ts +3 -3
- package/dist/types/components/JcMoreQueryContain/index.vue.d.ts +6 -6
- package/dist/types/components/JcSelectQuery/index.d.ts +8 -8
- package/dist/types/components/JcSelectQuery/index.vue.d.ts +16 -16
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
- [组件目录介绍](#组件目录介绍)
|
|
10
10
|
- [安装使用说明](#安装使用说明)
|
|
11
|
+
- [配套 Hooks 使用说明](#配套Hooks使用说明)
|
|
11
12
|
- [组件文档](#组件文档)
|
|
12
13
|
- [JcSelectQuery](#JcSelectQuery)
|
|
13
14
|
- [JcDatePicker](#JcDatePicker)
|
|
@@ -15,7 +16,6 @@
|
|
|
15
16
|
- [JcInputComplex](#JcInputComplex)
|
|
16
17
|
- [JcTagQuery](#JcTagQuery)
|
|
17
18
|
- [JcMoreQueryContain](#JcMoreQueryContain)
|
|
18
|
-
- [配套 Hooks 使用说明](#配套Hooks使用说明)
|
|
19
19
|
|
|
20
20
|
## 组件目录介绍
|
|
21
21
|
|
|
@@ -45,7 +45,7 @@ npm i @bscjc/webui
|
|
|
45
45
|
import { createApp } from "vue";
|
|
46
46
|
import App from "./App.vue";
|
|
47
47
|
import JcWebui from "@bscjc/webui";
|
|
48
|
-
import "@bscjc/webui/dist/
|
|
48
|
+
import "@bscjc/webui/dist/index.css";
|
|
49
49
|
|
|
50
50
|
const app = createApp(App);
|
|
51
51
|
app.use(JcWebui);
|
|
@@ -70,6 +70,57 @@ import { JcSelectQuery } from "@bscjc/webui";
|
|
|
70
70
|
</script>
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
+
## 配套 Hooks 使用说明
|
|
74
|
+
|
|
75
|
+
### useQuery.ts
|
|
76
|
+
|
|
77
|
+
#### 概述
|
|
78
|
+
|
|
79
|
+
`useQuery`是 QueryFormComponents 组件库的配套 Hooks,提供查询表单状态管理功能。
|
|
80
|
+
|
|
81
|
+
#### 基本使用
|
|
82
|
+
|
|
83
|
+
```typescript
|
|
84
|
+
import { reactiveQuery } from from "@bscjc/webui"
|
|
85
|
+
const { queryForm, setQuery, addTag, reduceTag, reduceAllTag, clearQuery } = reactiveQuery()
|
|
86
|
+
|
|
87
|
+
// 设置查询条件
|
|
88
|
+
setQuery('name', 'test')
|
|
89
|
+
|
|
90
|
+
// 添加标签
|
|
91
|
+
addTag({ label: 'name', value: '名称:test' })
|
|
92
|
+
|
|
93
|
+
// 移除标签
|
|
94
|
+
reduceTag({ label: 'name', value: '名称:test' })
|
|
95
|
+
|
|
96
|
+
// 移除所有标签
|
|
97
|
+
reduceAllTag()
|
|
98
|
+
|
|
99
|
+
// 清空查询条件
|
|
100
|
+
clearQuery()
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
#### 方法
|
|
104
|
+
|
|
105
|
+
| 方法名 | 参数 | 说明 |
|
|
106
|
+
| ------------ | ------------------------------------- | ---------------- |
|
|
107
|
+
| setQuery | key: string, value: any | 设置查询条件 |
|
|
108
|
+
| addTag | tag: { label: string, value: string } | 添加查询标签 |
|
|
109
|
+
| reduceTag | tag: { label: string, value: string } | 移除指定标签 |
|
|
110
|
+
| reduceAllTag | - | 移除所有标签 |
|
|
111
|
+
| clearQuery | - | 清空所有查询条件 |
|
|
112
|
+
|
|
113
|
+
#### 返回值
|
|
114
|
+
|
|
115
|
+
| 名称 | 类型 | 说明 |
|
|
116
|
+
| ------------ | -------- | ------------------ |
|
|
117
|
+
| queryForm | object | 响应式查询表单对象 |
|
|
118
|
+
| setQuery | Function | 设置查询条件的方法 |
|
|
119
|
+
| addTag | Function | 添加标签的方法 |
|
|
120
|
+
| reduceTag | Function | 移除标签的方法 |
|
|
121
|
+
| reduceAllTag | Function | 移除所有标签的方法 |
|
|
122
|
+
| clearQuery | Function | 清空查询条件的方法 |
|
|
123
|
+
|
|
73
124
|
## 组件文档
|
|
74
125
|
|
|
75
126
|
### JcSelectQuery
|
|
@@ -420,57 +471,6 @@ const moreQueryForm = ref({ status: "", type: "" });
|
|
|
420
471
|
|
|
421
472
|
继承自 Element Plus 的`el-popover`组件,支持其所有 Props 和 Events。
|
|
422
473
|
|
|
423
|
-
## 配套 Hooks 使用说明
|
|
424
|
-
|
|
425
|
-
### useQuery.ts
|
|
426
|
-
|
|
427
|
-
#### 概述
|
|
428
|
-
|
|
429
|
-
`useQuery`是 QueryFormComponents 组件库的配套 Hooks,提供查询表单状态管理功能。
|
|
430
|
-
|
|
431
|
-
#### 基本使用
|
|
432
|
-
|
|
433
|
-
```typescript
|
|
434
|
-
import { reactiveQuery } from from "@bscjc/webui"
|
|
435
|
-
const { queryForm, setQuery, addTag, reduceTag, reduceAllTag, clearQuery } = reactiveQuery()
|
|
436
|
-
|
|
437
|
-
// 设置查询条件
|
|
438
|
-
setQuery('name', 'test')
|
|
439
|
-
|
|
440
|
-
// 添加标签
|
|
441
|
-
addTag({ label: 'name', value: '名称:test' })
|
|
442
|
-
|
|
443
|
-
// 移除标签
|
|
444
|
-
reduceTag({ label: 'name', value: '名称:test' })
|
|
445
|
-
|
|
446
|
-
// 移除所有标签
|
|
447
|
-
reduceAllTag()
|
|
448
|
-
|
|
449
|
-
// 清空查询条件
|
|
450
|
-
clearQuery()
|
|
451
|
-
```
|
|
452
|
-
|
|
453
|
-
#### 方法
|
|
454
|
-
|
|
455
|
-
| 方法名 | 参数 | 说明 |
|
|
456
|
-
| ------------ | ------------------------------------- | ---------------- |
|
|
457
|
-
| setQuery | key: string, value: any | 设置查询条件 |
|
|
458
|
-
| addTag | tag: { label: string, value: string } | 添加查询标签 |
|
|
459
|
-
| reduceTag | tag: { label: string, value: string } | 移除指定标签 |
|
|
460
|
-
| reduceAllTag | - | 移除所有标签 |
|
|
461
|
-
| clearQuery | - | 清空所有查询条件 |
|
|
462
|
-
|
|
463
|
-
#### 返回值
|
|
464
|
-
|
|
465
|
-
| 名称 | 类型 | 说明 |
|
|
466
|
-
| ------------ | -------- | ------------------ |
|
|
467
|
-
| queryForm | object | 响应式查询表单对象 |
|
|
468
|
-
| setQuery | Function | 设置查询条件的方法 |
|
|
469
|
-
| addTag | Function | 添加标签的方法 |
|
|
470
|
-
| reduceTag | Function | 移除标签的方法 |
|
|
471
|
-
| reduceAllTag | Function | 移除所有标签的方法 |
|
|
472
|
-
| clearQuery | Function | 清空查询条件的方法 |
|
|
473
|
-
|
|
474
474
|
## License
|
|
475
475
|
|
|
476
476
|
MIT
|