本文實例為大家分享了vue實現物流時間軸效果的具體代碼，供大家參考，具體內容如下

son組件(物流時間軸組件)

<template> <div class='steps-wrap'> <ul> <li v-for='(item,index) in steps' :key='index'><span class='time'>{{item.time}}</span><div class='circle'> <img v-if='index===0' src='http://m.propowerdrill.cn/assets/images/user_seleted.png' /> <img v-else-if='index === steps.length-1' src='http://m.propowerdrill.cn/assets/images/user_seleted.png' /> <i v-else class='circle-icon'></i></div><span v-html='item.context' class='message'></span> </li> </ul> </div></template><script>export default { props: { steps: { type: Array, } }}</script><style lang='less'>.steps-wrap { ul { padding: 0 16px; li { display: flex; line-height: 1rem; color: #999; .time {text-align: center;width: 80px;font-size: 12px; } .circle {position: relative;z-index: 999;display: flex;justify-content: center;align-items: center;border-radius: 50%;width: 16px;height: 16px;top: 0;.icon { width: 100%; height: 100%;}.circle-icon { position: relative; z-index: 999; display: inline-block; border-radius: 50%; width: 8px; height: 8px; background-color: #333333;} } .message {padding: 0 0 1.6rem 25px;font-size: 12px;flex: 1;border-left: 1px solid #999999;margin-left: -8px; } &:last-child {.message { border-left: 1px solid transparent;} } } }}</style>

parent組件

<template> <div class='logistics'> <m-header :title='title' fixed> <a @click='$router.go(-1)' slot='left'><img src='http://m.propowerdrill.cn/assets/images/root_back.png' /> </a> </m-header> <div @click='isShow = true'> <img src='http://m.propowerdrill.cn/assets/images/ck.jpg' /> <div class='text'><p class='name'>{{current.nu}}</p><p class='title'>{{current.com}}</p> </div> <img src='http://m.propowerdrill.cn/assets/images/root_next.png' /> </div> <v-steps v-if='loadDataDone' :steps='current.data'></v-steps> <div v-else class='empty'> <img src='http://m.propowerdrill.cn/assets/images/vip.png' alt /> <span>抱歉！暫無查詢記錄</span> </div> <van-action-sheet v-model='isShow'> <ul class='list'><li v-for='item in list' @click='onSelect(item)' :key='item.nu' class='item'> <img src='http://m.propowerdrill.cn/assets/images/ck.jpg' /> <div class='text'> <p class='name'>{{item.nu}}</p> <p class='title'>{{item.com}}</p> </div></li> </ul> </van-action-sheet> </div></template><script>import mHeader from ’@/components/common/header/header.vue’import vSteps from ’@/components/common/steps/Steps.vue’export default { name: ’logistics’, components: { mHeader, vSteps }, computed: { orderSn () { return this.$route.query.orderSn } }, data () { return { title: ’查詢結果’, isShow: false, list: [], current: {}, loadDataDone: false } }, created () { this.getData() }, methods: { async getData () { this.loadDataDone = true let res = await this.get(this.API.message.deliveryHtml, {params: { orderSn: this.orderSn} }).then(res => {if (res.Status == ’true’ && res.StatusCode === ’200’) { // 手機號點擊撥打處理 const telReg = /1[3-9]d{9}|[0][1-9]{2,3}-[0-9]{5,10}|95d{3}/g res.Result.forEach(item => { item.data.forEach(item1 => { // 提取出來手機號 if (telReg.test(item1.context)) { let tels = [...new Set(item1.context.match(telReg))] tels.forEach(item2 => { item1.context = item1.context.replace(new RegExp(item2, ’g’), `<a href='tel:${item2}' rel='external nofollow' >${item2}</a>`) }) } }) }) this.current = res.Result[0] this.list = res.Result}if (res.Status == 0 || res.Status == 4) { this.loadDataDone = false} }) }, onSelect (item) { this.isShow = false this.current = item } }}</script><style lang='less' >.logistics { .item { display: flex; align-items: center; /* 垂直居中 */ padding: 12px 24px; .left { width: 50px; height: 50px; object-fit: cover; } .text { flex: 1; p {margin: 0;padding-left: 12px; } } .refresh { width: 24px; height: 24px; } } .empty { display: flex; justify-content: center; align-items: center; padding-top: 48px; font-size: 14px; span { padding-left: 12px; } }}</style>

接口數據格式

{ 'Status': 'true', 'StatusCode': '200', 'Msg': '成功', 'Timestamp': 1584005302985, 'Sign': null, 'Result': [{'state': '簽收','status': '3','com': 'SF','nu': 'SF1018384252542','data': [{ 'context': '[上海市]順豐速運 已收取快件', 'time': '2020-03-01 18:16:59', 'ftime': '2020-03-01 18:16:59'}, { 'context': '[上海市]快件在【上海青浦重固營業點】已裝車,準備發往 【上海華新集散中心】', 'time': '2020-03-01 18:40:14', 'ftime': '2020-03-01 18:40:14'}, { 'context': '[上海市]快件已發車', 'time': '2020-03-01 18:42:12', 'ftime': '2020-03-01 18:42:12'}, { 'context': '[上海市]快件到達 【上海華新集散中心】', 'time': '2020-03-01 19:01:08', 'ftime': '2020-03-01 19:01:08'}, { 'context': '[上海市]快件在【上海華新集散中心】已裝車,準備發往 【全國航空樞紐（蕭山】', 'time': '2020-03-01 20:01:27', 'ftime': '2020-03-01 20:01:27'}, { 'context': '[上海市]快件已發車', 'time': '2020-03-01 20:48:53', 'ftime': '2020-03-01 20:48:53'}, { 'context': '[杭州市]快件到達 【全國航空樞紐（蕭山】', 'time': '2020-03-01 23:20:28', 'ftime': '2020-03-01 23:20:28'}, { 'context': '[杭州市]快件在【全國航空樞紐（蕭山】已裝車,準備發往 【石家莊高開集散中心】', 'time': '2020-03-02 01:31:35', 'ftime': '2020-03-02 01:31:35'}, { 'context': '[杭州市]快件在【杭州飛往石家莊航班上】已起飛', 'time': '2020-03-02 04:15:00', 'ftime': '2020-03-02 04:15:00'}, { 'context': '[石家莊市]快件到達【石家莊】，準備發往【石家莊高開集散中心】', 'time': '2020-03-02 06:02:00', 'ftime': '2020-03-02 06:02:00'}, { 'context': '[石家莊市]快件到達 【石家莊高開集散中心】', 'time': '2020-03-02 08:21:18', 'ftime': '2020-03-02 08:21:18'}, { 'context': '[石家莊市]快件在【石家莊高開集散中心】已裝車,準備發往 【邢臺高新集散點】', 'time': '2020-03-02 09:15:47', 'ftime': '2020-03-02 09:15:47'}, { 'context': '[石家莊市]快件已發車', 'time': '2020-03-02 09:16:05', 'ftime': '2020-03-02 09:16:05'}, { 'context': '[邢臺市]快件到達 【邢臺高新集散點】', 'time': '2020-03-02 11:48:24', 'ftime': '2020-03-02 11:48:24'}, { 'context': '[邢臺市]快件在【邢臺高新集散點】已裝車,準備發往 【邢臺市沙河市宋璟營業點】', 'time': '2020-03-02 13:17:55', 'ftime': '2020-03-02 13:17:55'}, { 'context': '[邢臺市]快件已發車', 'time': '2020-03-02 13:18:54', 'ftime': '2020-03-02 13:18:54'}, { 'context': '[邢臺市]快件到達 【邢臺市沙河市宋璟營業點】', 'time': '2020-03-02 13:46:04', 'ftime': '2020-03-02 13:46:04'}, { 'context': '[邢臺市]正在派送途中,請您準備簽收(派件人:鄧朋飛,電話:18631965961)', 'time': '2020-03-02 13:59:33', 'ftime': '2020-03-02 13:59:33'}, { 'context': '[邢臺市]快件交給鄧朋飛,正在派送途中（聯系電話：18631965961,順豐已開啟“安全呼叫”保護您的電話隱私,請放心接聽！）', 'time': '2020-03-02 14:04:19', 'ftime': '2020-03-02 14:04:19'}, { 'context': '[邢臺市]您的快件已簽收，如有疑問請電聯小哥【鄧朋飛，電話：18631965961】。疫情期間順豐每日對網點消毒、小哥每日測溫、配戴口罩，感謝您使用順豐，期待再次為您服務。（主單總件數：1件）', 'time': '2020-03-02 14:37:20', 'ftime': '2020-03-02 14:37:20'}, { 'context': '[邢臺市]在官網'運單資料&簽收圖',可查看簽收人信息', 'time': '2020-03-02 14:37:20', 'ftime': '2020-03-02 14:37:20'}] }, {'state': '簽收','status': '3','com': 'YD','nu': '3103140966821','data': [{ 'context': '上海普陀區徐公司進行攬件掃描', 'time': '2020-02-13 20:13:39', 'ftime': '2020-02-13 20:13:39'}, { 'context': '上海分撥中心在分撥中心進行稱重掃描', 'time': '2020-02-13 23:22:20', 'ftime': '2020-02-13 23:22:20'}, { 'context': '上海分撥中心進行裝車掃描，發往：江蘇蘇州分撥中心', 'time': '2020-02-14 00:29:45', 'ftime': '2020-02-14 00:29:45'}, { 'context': '江蘇蘇州分撥中心在分撥中心進行卸車掃描', 'time': '2020-02-24 04:36:07', 'ftime': '2020-02-24 04:36:07'}, { 'context': '江蘇蘇州分撥中心從站點發出，本次轉運目的地：江蘇蘇州相城區公司', 'time': '2020-02-24 04:55:10', 'ftime': '2020-02-24 04:55:10'}, { 'context': '江蘇蘇州相城區公司萬里路便民寄存分部進行派件掃描；派送業務員：付龍龍；聯系電話：18751166952', 'time': '2020-02-24 09:22:13', 'ftime': '2020-02-24 09:22:13'}, { 'context': '江蘇蘇州相城區公司萬里路便民寄存分部進行派件掃描；派送業務員：付龍龍；聯系電話：18751166952', 'time': '2020-02-24 09:30:24', 'ftime': '2020-02-24 09:30:24'}, { 'context': '江蘇蘇州相城區公司萬里路便民寄存分部快件已被 快件已被 本人 簽收。如有問題請電聯業務員：付龍龍【18751166952】。相逢是緣,如果您對我的服務感到滿意,給個五星好不好？【請在評價小件員處給予五星好評】', 'time': '2020-02-24 11:11:05', 'ftime': '2020-02-24 11:11:05'}] }, {'state': '簽收','status': '3','com': 'ZTO','nu': '73122326322138','data': [{ 'context': '【蘇州市】 【昆山】（0512-83630555、0512-87807044） 的 CK（18762410718） 已攬收', 'time': '2019-11-07 18:42:40', 'ftime': '2019-11-07 18:42:40'}, { 'context': '【蘇州市】 快件已經到達 【昆山】', 'time': '2019-11-07 22:37:12', 'ftime': '2019-11-07 22:37:12'}, { 'context': '【蘇州市】 快件離開 【昆山】 已發往 【無錫中轉部】', 'time': '2019-11-07 22:49:26', 'ftime': '2019-11-07 22:49:26'}, { 'context': '【無錫市】 快件已經到達 【無錫中轉部】', 'time': '2019-11-08 05:15:58', 'ftime': '2019-11-08 05:15:58'}, { 'context': '【無錫市】 快件離開 【無錫中轉部】 已發往 【南京中轉部】', 'time': '2019-11-08 05:16:50', 'ftime': '2019-11-08 05:16:50'}, { 'context': '【南京市】 快件已經到達 【南京中轉部】', 'time': '2019-11-08 10:04:29', 'ftime': '2019-11-08 10:04:29'}, { 'context': '【南京市】 快件離開 【南京中轉部】 已發往 【南京浦口區】', 'time': '2019-11-08 10:12:19', 'ftime': '2019-11-08 10:12:19'}, { 'context': '【南京市】 快件已經到達 【南京浦口區】', 'time': '2019-11-08 13:03:28', 'ftime': '2019-11-08 13:03:28'}, { 'context': '【南京市】 【南京浦口區】 的中院（13291283965） 正在第1次派件, 請保持電話暢通,并耐心等待（95720為中通快遞員外呼專屬號碼，請放心接聽）。小哥今日體溫正常，將佩戴口罩為您投遞，也可以聯系小哥將您的快遞，放到您指定的代收點，祝您身體健康！', 'time': '2019-11-08 13:06:57', 'ftime': '2019-11-08 13:06:57'}, { 'context': '【南京市】 快件已由【菜鳥的南信大西苑濱江樓底菜鳥驛站】代簽收, 如有問題請電聯（13291283965 / 95311）, 感謝您使用中通快遞, 期待再次為您服務!', 'time': '2019-11-08 13:40:19', 'ftime': '2019-11-08 13:40:19'}] }], 'AlertType': 'toast'}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。