general-basic-form 2.1.6 → 2.1.7
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 +38 -179
- package/dist/index.d.ts +12 -0
- package/dist/index.js +8967 -0
- package/dist/index.umd.cjs +152 -0
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -2,18 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
# GeneralBasicForm
|
|
4
4
|
|
|
5
|
-
## 一个兼容 Vue2 、Vue3 和 React(未来实现) 的表单组件，支持 typescript，vue2 请使用@1 版本，Vue3 请使用@2
|
|
6
|
-
|
|
7
|
-
| 组件\兼容性
|
|
8
|
-
|
|
|
9
|
-
| VGeneralBasicForm
|
|
10
|
-
| VSearchBox
|
|
11
|
-
| VInfiniteScrollList
|
|
12
|
-
| VDescriptions
|
|
13
|
-
| VInputMobilecVerification |
|
|
14
|
-
| VInputGraphicVerification |
|
|
15
|
-
| VTreeTransfer
|
|
16
|
-
| VTabs
|
|
5
|
+
## 一个兼容 Vue2 、Vue3 和 React(未来实现) 的表单组件，支持 typescript，vue2 请使用@1 版本，Vue3 请使用@2 版本，React19请使用@3 版本。
|
|
6
|
+
|
|
7
|
+
| 组件\兼容性 | vue2 | vue3 | Ant Design Vue（next） | Element Plus | Element（ui） | React19 | shadcn/ui |
|
|
8
|
+
| ------------------- | ---- | ---- | ---- | ---- | ---- | ------------------- | ------------------- |
|
|
9
|
+
| VGeneralBasicForm | √ | √ | | √ | √ | | |
|
|
10
|
+
| VSearchBox | √ | | | | √ | | |
|
|
11
|
+
| VInfiniteScrollList | | √ | | √ | | | |
|
|
12
|
+
| VDescriptions | √ | √ | √ | √ | √ | | |
|
|
13
|
+
| VInputMobilecVerification | | √ | √ | √ | | | |
|
|
14
|
+
| VInputGraphicVerification | | √ | √ | √ | | | |
|
|
15
|
+
| VTreeTransfer | √ | √ | | √ | √ | | |
|
|
16
|
+
| VTabs | √ | | | | √ | | |
|
|
17
|
+
| RGeneralBasicForm | | | | | | √ | √ |
|
|
18
|
+
| RFormList | | | | | | √ | √ |
|
|
19
|
+
| RTabs | | | | | | √ | √ |
|
|
17
20
|
|
|
18
21
|
安装：npm i general-basic-form<br/>
|
|
19
22
|
install: npm i general-basic-form
|
|
@@ -34,7 +37,7 @@ app.use(ElementPlus)
|
|
|
34
37
|
```
|
|
35
38
|
|
|
36
39
|
```
|
|
37
|
-
import { RGeneralBasicForm } from 'general-basic-form';
|
|
40
|
+
import { RGeneralBasicForm,RBasicForm } from 'general-basic-form';
|
|
38
41
|
```
|
|
39
42
|
|
|
40
43
|
<RGeneralBasicForm
|
|
@@ -47,6 +50,24 @@ fieldGroupSetting={{ className: 'grid grid-cols-4 gap-4' }}
|
|
|
47
50
|
|
|
48
51
|
> </RGeneralBasicForm>
|
|
49
52
|
|
|
53
|
+
<RBasicForm
|
|
54
|
+
formItem={formItem}
|
|
55
|
+
getList={getList}
|
|
56
|
+
parametersType="data"
|
|
57
|
+
noInputBlank
|
|
58
|
+
formData={detail}
|
|
59
|
+
fieldGroupSetting={{ className: 'grid grid-cols-4 gap-4' }}
|
|
60
|
+
coms={{
|
|
61
|
+
Input,
|
|
62
|
+
Button,
|
|
63
|
+
Select,
|
|
64
|
+
SelectContent,
|
|
65
|
+
SelectItem,
|
|
66
|
+
SelectTrigger,
|
|
67
|
+
SelectValue,
|
|
68
|
+
SelectGroup,
|
|
69
|
+
}}
|
|
70
|
+
></RBasicForm>
|
|
50
71
|
|
|
51
72
|
|
|
52
73
|
在单纯作为表单的时候可以这样使用：
|
|
@@ -199,6 +220,10 @@ parametersType 类型介绍
|
|
|
199
220
|
label: '天数-价格配置',
|
|
200
221
|
prop: 'prices',
|
|
201
222
|
type: 'form-list',
|
|
223
|
+
description: [
|
|
224
|
+
'段落1',
|
|
225
|
+
'段落2',
|
|
226
|
+
],
|
|
202
227
|
setting: {
|
|
203
228
|
ndim: 3, // 多维数组，注意要和columns的长度相等，输出为对象数组
|
|
204
229
|
columns: [
|
|
@@ -536,169 +561,3 @@ parametersType 类型介绍
|
|
|
536
561
|
_/
|
|
537
562
|
"checkbox" = "checkbox",
|
|
538
563
|
|
|
539
|
-
# VInfiniteScrollList 对虚拟滚动列表+接口的封装
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
```
|
|
544
|
-
import { VInfiniteScrollList } from 'general-basic-form'
|
|
545
|
-
import 'general-basic-form/style'
|
|
546
|
-
<VInfiniteScrollList
|
|
547
|
-
:search="search"
|
|
548
|
-
id="user_id"
|
|
549
|
-
name="name"
|
|
550
|
-
ref="InfiniteScrollListRef"
|
|
551
|
-
checkbox
|
|
552
|
-
:extra="extraRender"
|
|
553
|
-
:max="1"
|
|
554
|
-
/>
|
|
555
|
-
```
|
|
556
|
-
|
|
557
|
-
```
|
|
558
|
-
移动端配合下拉刷新使用
|
|
559
|
-
import { getOrderItem } from "../orderItem/functional"
|
|
560
|
-
// getOrderItem为JSX函数，返回一个VUE组件
|
|
561
|
-
|
|
562
|
-
<t-pull-down-refresh v-model="refreshing" @refresh="onRefresh" class="refresh-content">
|
|
563
|
-
<VInfiniteScrollList :search="loadData" :checkbox="false" id="cancelId" ref="InfiniteScrollListRef" checkbox
|
|
564
|
-
:extra="getOrderItem" height="100%" infinite-scroll-distance="50"/>
|
|
565
|
-
</t-pull-down-refresh>
|
|
566
|
-
```
|
|
567
|
-
|
|
568
|
-
```
|
|
569
|
-
search：数据接口 (page: Number) => Promise<[]>
|
|
570
|
-
id：数据key值（唯一和选择值）
|
|
571
|
-
name：显示名字
|
|
572
|
-
checkbox：是否有多选功能，不传的话就是单纯的虚拟滚动列表
|
|
573
|
-
extra：同行额外显示的内容，(item: any) => VNode | String;
|
|
574
|
-
//el-checkbox有固定高度，如果需要配置高度比较高，例如有换行的自定义extra，最好处理一下样式，例子：
|
|
575
|
-
//:deep(.el-checkbox) {
|
|
576
|
-
// padding: 6px 16px !important;
|
|
577
|
-
// display: flex;
|
|
578
|
-
// align-items: baseline;
|
|
579
|
-
// height: auto;
|
|
580
|
-
//}
|
|
581
|
-
defaultSelection：包含数据key值的对象数组或者直接传入key值数组
|
|
582
|
-
height:默认272px String
|
|
583
|
-
```
|
|
584
|
-
|
|
585
|
-
```
|
|
586
|
-
defineExpose({ reset, loadList, selectInfo, list, ifbottom });
|
|
587
|
-
InfiniteScrollListRef?.value?.reset()：重置列表内容
|
|
588
|
-
InfiniteScrollListRef?.value?.lowReset()：重置列表内容，但保留已选择的选项
|
|
589
|
-
InfiniteScrollListRef?.value?.loadList()：向下滚动列表内容，受到loading和ifbottom的影响
|
|
590
|
-
InfiniteScrollListRef?.value?.refreshList()：刷新列表，滚动列表会对整个内容重新请求数据，已选择的内容会自动选择
|
|
591
|
-
InfiniteScrollListRef?.value?.selectInfo：选择的内容
|
|
592
|
-
InfiniteScrollListRef?.value?.list：列表的内容
|
|
593
|
-
InfiniteScrollListRef?.value?.ifbottom：是否到底部
|
|
594
|
-
InfiniteScrollListRef?.value?.loading：加载中
|
|
595
|
-
```
|
|
596
|
-
|
|
597
|
-
# VDescriptions 对展示描述列表的封装
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
```
|
|
602
|
-
import { VDescriptions } from 'general-basic-form'
|
|
603
|
-
<VDescriptions
|
|
604
|
-
:formData="props.formData"
|
|
605
|
-
:formItem="formItem"
|
|
606
|
-
componentType="Ant Design Vue"
|
|
607
|
-
...其他el-descriptions的配置
|
|
608
|
-
/>
|
|
609
|
-
```
|
|
610
|
-
|
|
611
|
-
```
|
|
612
|
-
formData:Object
|
|
613
|
-
formItem:[ {
|
|
614
|
-
label: '受访人',
|
|
615
|
-
prop: 'contactors',
|
|
616
|
-
render: (scope: any) => {
|
|
617
|
-
const { $index, row = {} } = scope
|
|
618
|
-
const { contactors = [] } = row
|
|
619
|
-
const ele = (contactors.length > 0 ? <span>{contactors.map((item: any) => item.name).join("，")} </span> : null)
|
|
620
|
-
return ele
|
|
621
|
-
}
|
|
622
|
-
},
|
|
623
|
-
{
|
|
624
|
-
label: '拜访详情',
|
|
625
|
-
prop: 'detail',
|
|
626
|
-
descriptionsItemProps:{
|
|
627
|
-
'label-class-name': 'label-class-name'
|
|
628
|
-
}
|
|
629
|
-
}]
|
|
630
|
-
componentType:"Ant Design Vue"|"Element Plus"（默认）
|
|
631
|
-
strict:Boolean //使用strict参数后，如果formData内的某个字段没有值，对应的描述元素将不会展示（包括标签文字），但有render的字段仍然会展示
|
|
632
|
-
descriptionsItemProps:a-descriptions-item|el-descriptions-item的配置
|
|
633
|
-
```
|
|
634
|
-
|
|
635
|
-
# VInputMobilecVerification，VInputGraphicVerification 表单里的图形验证码、手机验证码组件，可以单独引入
|
|
636
|
-
|
|
637
|
-
```
|
|
638
|
-
<VInputGraphicVerification :item="{同表单，可忽略label和rules字段}" :loading="loading"></VInputGraphicVerification>
|
|
639
|
-
|
|
640
|
-
<VInputMobilecVerification :item="{同表单，可忽略label和rules字段}" componentType="Ant Design Vue" ref="VInputMobilecVerificationRef"></VInputMobilecVerification>
|
|
641
|
-
```
|
|
642
|
-
|
|
643
|
-
```
|
|
644
|
-
componentType:"Ant Design Vue"|"Element Plus"（默认）
|
|
645
|
-
```
|
|
646
|
-
|
|
647
|
-
```
|
|
648
|
-
此用法下必须提供：
|
|
649
|
-
provide(/* 注入名 */ "queryParams", /* 表单值对象 */ queryParams);
|
|
650
|
-
|
|
651
|
-
componentType为Ant Design Vue需要提供：
|
|
652
|
-
import { Form } from 'ant-design-vue';
|
|
653
|
-
provide(/* 注入名 */ "Form", /* Ant Design Vue Form实例，用于表单数据更新等 */ Form);
|
|
654
|
-
|
|
655
|
-
可选：
|
|
656
|
-
provide("size", size); // 同组件size
|
|
657
|
-
provide("getList", getList); // 输入框回车触发
|
|
658
|
-
|
|
659
|
-
调用发送短信验证码和重置的方法
|
|
660
|
-
VInputMobilecVerificationRef.value.VerificationButtonRef.buttonClick()
|
|
661
|
-
VInputMobilecVerificationRef.value.VerificationButtonRef.reset()
|
|
662
|
-
```
|
|
663
|
-
|
|
664
|
-
# VTreeTransfer 树形数据穿梭框
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
```
|
|
669
|
-
<VTreeTransfer :dataSource="classmate" :treeAttributes="{
|
|
670
|
-
'node-key': 'user_id', props: { label: 'user_name' }, 'default-expand-all': false
|
|
671
|
-
}" transferTitleRight="白名单(不会被选中)" transferTitleLeft="普通名单" filterable :checkedKeys="checkedKeys">
|
|
672
|
-
</VTreeTransfer>
|
|
673
|
-
|
|
674
|
-
import { VTreeTransfer } from 'general-basic-form';
|
|
675
|
-
const VTreeTransferRef = ref([])
|
|
676
|
-
```
|
|
677
|
-
|
|
678
|
-
```
|
|
679
|
-
dataSource:[
|
|
680
|
-
{
|
|
681
|
-
label: 'Level one 1',
|
|
682
|
-
id:1,
|
|
683
|
-
children: [
|
|
684
|
-
{
|
|
685
|
-
label: 'Level two 1-1',
|
|
686
|
-
id:2,
|
|
687
|
-
children: [
|
|
688
|
-
{
|
|
689
|
-
label: 'Level three 1-1-1',
|
|
690
|
-
id:3,
|
|
691
|
-
},
|
|
692
|
-
],
|
|
693
|
-
},
|
|
694
|
-
],
|
|
695
|
-
},] 树状结构数据
|
|
696
|
-
treeAttributes:{} 树形控件的属性，见https://element-plus.org/zh-CN/component/tree.html
|
|
697
|
-
transferTitleLeft:"" 左标题
|
|
698
|
-
transferTitleRight:"" 右标题
|
|
699
|
-
filterable:false 是否显示搜索框
|
|
700
|
-
checkedKeys:[1,2] 选中的值
|
|
701
|
-
|
|
702
|
-
获取选中的数组详情：
|
|
703
|
-
VTreeTransferRef.value["selectedList"].map((item) => {}))
|
|
704
|
-
```
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @Author: 陈德立*******419287484@qq.com
|
|
3
|
+
* @Date: 2023-11-07 17:55:59
|
|
4
|
+
* @LastEditTime: 2025-10-24 20:47:29
|
|
5
|
+
* @LastEditors: 陈德立*******419287484@qq.com
|
|
6
|
+
* @Github: https://github.com/Alan1034
|
|
7
|
+
* @Description:
|
|
8
|
+
* @FilePath: /GeneralBasicForm/public/index.d.ts
|
|
9
|
+
*
|
|
10
|
+
*/
|
|
11
|
+
/// <reference types="vite/client" />
|
|
12
|
+
declare module "general-basic-form";
|