1.前言
根据自己的使用情况，为了提高开发效率，对已有组件进行了二次封装，文章中二次封装的组件简称为py组件。有些element-ui中表单组件（Form）想在uniapp中进行使用，py组件封装了一些实现起来比较复杂的组件。同时，py组件封装了一些其他组件，比如：流程图预览组件、图片上传组件。如果没有特别标明，表示组件是支持H5、APP和微信小程序三端的。其中，APP仅测试了安卓版，并且在雷电模拟器环境下进行的测试。由于我主页uniapp相关文章中可能包含py组件，本文只介绍py组件的使用方式，不提供资源下载方式，如果有需要可以通过我的主页找到相关资源。特别注意，下述组件如果包含参数value，请用v-model绑定。
2.组件属性
1.py-bpmn-tree-node
此组件只用于微信小程序流程图节点的显示，依赖于uni-icons、u--text、u-row和u-col，一般情况下，只用于py-bpmn-viewer组件。
|------------|--------|---------|---------|---------|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| treeData | 节点数据 | Object | | |
| bortherNum | 兄弟数量 | Number | 1 | |
| hasStart | 流程是否启动 | Boolean | false | true |
2.py-bpmn-viewer
1.此组件用于bpmn流程图显示，依赖于插件bpmn-js（版本11.1.0）和x2js（在utils文件夹下，只用于微信小程序的xml转换Object），并且依赖于py-bpmn-tree-node组件。在H5和APP直接使用bpmn-js插件，微信小程序中会拆分成树进行展示。
|----------|----------|---------|---------|---------|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| flowData | 流程信息，必填项 | Object | | |
| hasStart | 流程是否启动 | Boolean | false | true |
flowData必须包含xmlData和nodeData属性，xmlData为bpmn流程图xml文件，nodeData为节点信息，类型为Object。nodeData必须包含key和completed属性，key为节点id，类型为String；completed为节点是否完成，类型为Boolean。
2.未启动流程时，流程图在三端的展示效果。
2.1在H5端效果
2.2在APP端效果
2.3在微信小程序端效果
3.环形流程图效果
3.1bmpn-js展示标果不影响
3.2在微信小程序展示原理是将流程图拆分为树，但是对于上述这种环形流程图，在树形结构中无法显示，最后通过中转节点完成。对于非环形流程图，能够正常使用，微信小程序不支持操作dom，目前只想出这一种解决方式。
3.py-button
此组件实际上就是u-button，我没有进行任何修改。但是，为什么还要写这个组件，因为流程审批时候，连续使用4个按钮，在APP和微信小程序中没有问题，但是H5时，会莫名奇妙地自动调用某个button的click事件，所以写这个组件。组件参数就不介绍了，和u-button一致，可以具体查看u-button使用方式。
4.py-cascader
1.此组件对应el-cascsder级联选择器，依赖于u-tag和u-picker，支持初值和表单重置，打开时，如果是空值，默认显示每一列第一个数据。
|------------------|-----------------------|--------|---------|---------|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| value | 绑定值，绑定使用v-model | | | |
| options | 级联数组，与el-cascsder一致 | Array | | |
| props | 级联属性名称，与el-cascsder一致 | | | |
| u-picker组件属性（属性功能与u-picker一致，但是只能配置下面显示的属性） |||||
| showToolbar | | | | |
| title | | | | |
| itemHeight | | | | |
| cancelText | | | | |
| confirmText | | | | |
| cancelColor | | | | |
| confirmColor | | | | |
| visibleItemCount | | | | |
对于此组件，只需要配置前三个参数即可。如果想改变样式，再设置u-picker相关属性。
2.组件在三端的展示效果。
2.1在H5端效果
2.2在APP端效果
2.3在微信小程序效果
5.py-color-picker
1.此组件依赖于t-color-picker和u-tag组件，修改了t-color-picker部分内容，支持初值和重置，最终获取值为hex格式，如果有其他格式需求，请自己转换。
|----------|-----------------|---------|---------|---------|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| value | 绑定值，绑定使用v-model | | | |
| readOnly | 是否只读状态 | Boolean | false | true |
2.组件在三端的展示效果。
2.1在H5端效果
2.2在APP端效果
2.3在微信小程序端效果
6.py-datetime-picker
1.此组件依赖于u-datetime-picker和u-tag，支持初值和重置。组件参数和u-datetime-picker完全一直，具体可以查看datetime使用方式。重写此组件的原因是，u-datetime-picker组件随着参数mode设置值不同，导致输出日期格式不同，vue版本保存的值和uniapp版本值无法统一。而py-datetime-picker组件能够和el-date-picker组件输出一样的格式，现在py-datetime-picker只做到支持和el-date-picker组件默认格式统一，如果有特殊需求，需要自己修改py-datetime-picker组件。目前，py-datetime-picker组件mode设置为datetime输出格式为yyyy-MM-dd HH:mm；mode设置为date输出格式为yyyy-MM-dd；mode设置为time输出格式为HH:mm；mode设置为year-month输出格式为yyyy-MM。可以看去，py-datetime-picker无法精确到秒，这也是没办法，因为u-datetime-picker也无法精确到秒。这里就不展示所有mode类型的图片了，下面会以mode设置为datetime，展示组件在三端的样式。
2.组件在三端的展示效果。
2.1在H5端效果
2.2在APP端效果
2.3在微信小程序端效果
7.py-dict-tag
此组件依赖于u--text，用于若依框架下字典显示。不用自己通过循环字典选项，根据值获取标签，此组件会完成。
|-------------|--------|--------|-----------|---------|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| dictOptions | 字典选项 | Array | null | |
| dictValue | 当前值 | String | undefined | |
由于这个组件就一个循环匹配，然后通过u--text进行显示，肯定三端都支持，就不做三端效果展示了。
8.py-flow-record-item
1.此组件依赖于uni-icons和static/py/icon文件下的文件，用于流程的流转记录节点，一般不会使用，这里就不介绍参数了。如果有需要，可以自行查看此组件。
2.组件在三端的展示效果。
2.1在H5端效果
2.2在APP端效果
2.3在微信小程序效果
9.py-popup
1.此组件依赖于u-popup和u--text，用于展示展示属性和弹框填写信息。由于u-popup每次使用都要自己设置大量样式，我根据自己需求，设置了默认样式，能够快速使用。py-popup设置了两个插槽，默认插槽用于展示属性，如果内容过多，会自动加滚动；具名插槽form，主要用于弹窗填写表单信息。其中，具名插槽form，只有填写参数title时才会生效。具名插槽form在参数mode设置为center效果最好，如果有需要，最好设置为center。
|--------|---------------|--------|---------|---------|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| title | 标题，并且生效form插槽 | String | "" | |
其他参数和u-popup一致，具体可以查看u-popup使用方式。但是不支持customStyle，由于我查看u-popup代码，没发现customStyle参数的接收地方，我怕设置上不能使用，如果有需要，可以根据情况修改py-popup组件。
2.组件默认插槽在三端的展示效果。
2.1在H5端效果
2.2在APP端效果
2.3在微信小程序端效果
3.组件具名插槽form在三端的展示效果。
3.1在H5端效果
3.2在APP端效果
3.3在微信小程序端效果
10.py-section
1.此组件依赖于uni-section和u--text，用于显示对象属性和值。如果想简单显现，设置title和text参数即可。如果想有特殊样式，可以设置参数title，值具体显示可以使用py-section带的默认插槽。但是，需要注意参数text设置和插槽使用，两者选一，不要同时使用。
|--------|--------|----------------|-----------|---------|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| title | 标题 | String, Number | undefined | |
其他参数和uni-section一致，具体可以查看uni-section使用方式。title其实就是uni-section中的属性。
2.使用方式
3.三端展示效果就是py-popup默认插槽的展示效果。
11.py-select
1.此组件依赖于u--input和u-action-sheet，为了不用每次都要设置这两个组件，所以封装了py-select。
|--------|-----------------|----------------|---------|---------|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| data | 数据数组对象 | Array | [] | |
| value | 绑定值，使用v-model绑定 | String, Number | | |
| title | 显示标题 | String | "" | |
参数data数组的每个对象，都得包含name和value两个属性，name为显示值，value为实际值。
2.1在H5端效果
2.2在APP端效果
2.3在微信小程序端效果
12.py-swipe-action
1.此组件依赖于uni-swipe-action、uni-swipe-action-item和u-tag。由于手机端非常不适合使用table展示，通过此组件能够展示多个信息，并且通过滑动，选择事件。既美观，又能展示大量数据。
|------------|--------|--------|-----------|---------|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| subTitle | 子标题 | String | undefined | |
| thirdTitle | 三级标题 | String | undefined | |
| tagText | 显示标题 | String | "" | |
| tagType | 标签类型 | String | primary | |
其他参数和uni-swipe-action-item一致，同时支持click和change事件，具体可以查看uni-swipe-action使用方式，里面包含uni-swipe-action-item的参数配置。
2.使用方式
3.组件在三端的展示效果。
3.1在H5端效果
3.2在APP端效果
3.3在微信小程序端效果
13.py-tag
此组件依赖于u-tag，由于u-tag宽度设置为100%，还需要自己设置才封装py-tag组件。py-tag会根据内容宽度而设置宽度。参数和u-tag一致，具体可以查看u-tag使用方式。u-tag支持三端展示，当然py-tag也支持三端展示，这里就不截图了
14.py-tranfer
1.此组件依赖于u-check-group、u-checkbox和u-button，此组件对应el-tranfer，但是不支持搜索，支持初值和重置。
|--------|-----------------|--------|---------------------------------------------------|---------|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| data | Transfer 的数据源 | Array | [] | |
| titles | 自定义列表标题 | Array | [] | |
| value | 绑定值，使用v-model绑定 | Array | [] | |
| props | 数据源的字段别名 | Object | { label: 'label', key:'key', disabled:'disabled'} | |
上述4个参数使用方式与el-tranfer一致，具体可以查看el-tranfer使用方式。并且，py-tranfer支持change、left-check-change和right-check-change，使用方式和参数与el-tranfer一致。
2.组件在三端的展示效果。
2.1在H5端效果
2.2在APP端效果
2.3在微信小程序端效果
15.py-upload-image
1.此组件依赖于u-upload，用于图片上传，支持大屏预览、只读、初始值和重置。只读状态下会自动隐藏删除和上传按钮。
|----------|------------|---------|------------|---------|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| action | 上传的地址 | String | 若依框架默认上传地址 | |
| data | 上传时附带的额外参数 | Object | | |
| readOnly | 是否只读状态 | Boolean | false | true |
其他参数与u-upload一致，具体可以查看u-upload使用方式。最好只用此组件上传图片，其他类型文件上传请使用其他组件，也就是不要修改参数accept的值。支持change事件，在H5会自动进行双向绑定，不需要自己设置，但是APP和微信小程序需要手动设置文件列表。如果后端使用若依框架，参数action不用设置，会自动调用若依后端上传文件的接口
2.使用方式
3.组件在三端的展示效果。
3.1在H5端效果
3.2在APP端效果
3.3在微信小程序端效果
4.只读状态下，隐藏删除和上传按钮，因为各端效果一致，只展示H5端的效果。
5.大屏预览效果在各端效果一致，只展示H5端的效果。
3.总结
上述组件使用时，如果组件中有绑定值value，请通过v-model进行绑定。py组件还有很多不足，请大家见谅。此文章不提供资源下载方式，只用于组件说明。如果喜欢此文章，可以点赞支持下。如果想获取资源，请通过我主页文章进行获取。我会不定时发布关于若依框架、java、vue、uniapp等方面内容，如果感兴趣可以关注我。