0.0.6 • Published 8 months ago
meixiexpresscheck v0.0.6
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 插槽
暂无