uniapp二次封装组件（py组件）

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.

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等方面内容，如果感兴趣可以关注我。