介绍
在前端开发中，我们经常会使用一些第三方包来辅助我们的开发过程，而 npm 包是其中最为常用的一种。今天我们要介绍的是一个名为 mk-app-delivery-order 的 npm 包，它是一个基于 React 开发的快递配送订单页面组件库。
通过使用 mk-app-delivery-order，我们可以快速构建出一个具有订单列表、订单详情、物流信息、编辑订单等功能的快递配送应用。
快速使用
我们可以通过以下命令来安装 mk-app-delivery-order：
npm install mk-app-delivery-order --save
在我们的 React 项目中，通过以下方式引入 mk-app-delivery-order：
import DeliveryOrder from 'mk-app-delivery-order';
紧接着，我们就可以使用 DeliveryOrder 组件了：
<DeliveryOrder orderId={123456} />以上代码将会展示一个 orderId 为 123456 的订单详情页面。
参数说明
在使用 mk-app-delivery-order 的时候，我们可以通过传递一些参数来自定义组件的展示效果。下面我们来介绍一下可用的参数：
orderId
- 类型：Number
- 是否必传：是
- 说明：要展示的订单号
orderStatus
- 类型：String
- 是否必传：否
- 默认值：’paid’
- 说明：订单状态，可选值：’paid’、’shipped’、’delivered’、’closed’
onEditOrder
- 类型：Function
- 是否必传：否
- 说明：编辑订单回调函数，当用户点击编辑订单按钮的时候会触发
onRefreshOrder
- 类型：Function
- 是否必传：否
- 说明：刷新订单回调函数，当用户点击刷新订单按钮的时候会触发
onBack
- 类型：Function
- 是否必传：否
- 说明：返回按钮回调函数，当用户点击返回按钮的时候会触发
onDownload
- 类型：Function
- 是否必传：否
- 说明：下载发货单回调函数，当用户点击下载发货单按钮的时候会触发
enableEditOrder
- 类型：Boolean
- 是否必传：否
- 默认值：true
- 说明：是否允许编辑订单
enableRefreshOrder
- 类型：Boolean
- 是否必传：否
- 默认值：true
- 说明：是否允许刷新订单
enableDownload
- 类型：Boolean
- 是否必传：否
- 默认值：false
- 说明：是否允许下载发货单
showBackButton
- 类型：Boolean
- 是否必传：否
- 默认值：true
- 说明：是否展示返回按钮
showEditButton
- 类型：Boolean
- 是否必传：否
- 默认值：true
- 说明：是否展示编辑订单按钮
showRefreshButton
- 类型：Boolean
- 是否必传：否
- 默认值：true
- 说明：是否展示刷新订单按钮
showDownloadButton
- 类型：Boolean
- 是否必传：否
- 默认值：false
- 说明：是否展示下载发货单按钮
示例代码
下面是一个完整的 mk-app-delivery-order 示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------------- ---- ------------------------
-------- -------------------- -
----------------- -------- ---------
-
-------- ----------------------- -
-------------------- -------- ---------
-
-------- -------- -
--------------- -------
-
-------- ------------------- -
--------------------- -------- -------- ---------
-
----------------
--------------
----------------
------------------
---------------
------------------
--------------
-------------------------
-------------------------------
---------------
-----------------------
--------------
-----------------
--------------
------------------ ---
-------------------------------
--我们可以在 onEditOrder、onRefreshOrder、onBack 和 onDownload 回调函数中添加具体的业务逻辑，完善我们的应用。通过自定义各个参数的取值，也可以实现一个满足具体业务场景要求的订单详情页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005642681e8991b448e154f