meixiexpresscheck

用于展示物流详情的组件/如果存在多个物流单号则可以选择单个物流单号来查看物流详情

项目结构

 |-- lib -------------------------------------项目打包文件夹
    |   |-- demo.html
    |   |-- index.d.ts
    |   |-- index.js
    |   |-- meixiexpresscheck.common.js
    |   |-- meixiexpresscheck.umd.js
    |   |-- meixiexpresscheck.umd.min.js
    |-- packages -------------------------------------项目主要文件夹
    |   |-- index.ts -------------------------------------项目入口文件
    |   |-- component -------------------------------------项目组件文件夹
    |       |-- expressCheck.vue ------------------------------------- 组件容器
    |       |-- expressItem.vue  ------------------------------------- 物流详情的单条item组件
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |-- src

组件预览

插件使用

///文件只导出meixiExpressCheck组件
export {meixiExpressCheck} from "meixiexpresscheck"
// 项目中使用
//全局注册物流组件
Vue.component(
    meixiExpressCheck.name,
    meixiExpressCheck
);

在vue中使用

<meixi-express-check v-model='logisticsSn'
                     :before-request='beforeRequest'
                     :express-list='logisticsNoList'>
</meixi-express-check>

meixiExpressCheck Api

props

| 参数 | 类型 | 默认值 | 可选值 | 描述 | |----------------|----------|-------------------------------|-----|----------------------------------| | v-model | String | / | / | 对应的物流单号 | | before-request | Function | / | / | 组件渲染成功后会调用该属性方法获取需要渲染的数据 | | express-list | Array | | | 可以选择传入，如果传入后组件上方将出现可以选择物流单号的下拉列表 | | selectProps | Object | {label:'label',value:'value'} | | 对应Element select 的配置项 |

代码实例

//before-request 示例

// async beforeRequest() {
//
//     try {
//         return new Promise(async (resolve, reject) => {
//             let list = await this.getLogisticsInfo();
//             resolve(list.map(item => {
//                       // 这里需要对数据进行二次加工，返回给组件渲染
                        // content 对应物流的文字内容
                        // time 需要转成时间戳格式
//                     const { context, ftime } = item;
//                     return {
//                         content: context,
//                         time: dayjs(ftime).valueOf()
//                     };
//                 })
//             )
//             ;
//         });
//     } catch (error) {
//
//     } finally {
//
//     }
// }

emit 事件

暂无

slot 插槽

暂无