| 本文实例为大家分享了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 class="icon" v-if="index===0" src="../../../assets/images/user_seleted.png" /> <img class="icon" v-else-if="index === steps.length-1" src="../../../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="../../assets/images/root_back.png" class="m-icon-img" style="width:20px" /> </a> </m-header> <div class="item" @click="isShow = true"> <img class="left" src="../../assets/images/ck.jpg" /> <div class="text"> <p class="name">{{current.nu}}</p> <p class="title">{{current.com}}</p> </div> <img class="refresh" src="../../assets/images/root_next.png" /> </div> <v-steps v-if="loadDataDone" :steps="current.data"></v-steps> <div v-else class="empty"> <img src="../../assets/images/vip.png" alt /> <span>抱歉！暂无查询记录</span> </div> <van-action-sheet v-model="isShow" title="物流"> <ul class="list"> <li v-for="item in list" @click="onSelect(item)" :key="item.nu" class="item"> <img class="left" src="../../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}|95/d{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 style="color:red" 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": "[邢台市]快件在【邢台高新集散点】已装车,准备发往 【邢台市沙河市宋
vue使用WebSocket模拟实现聊天功能
vue+swiper实现时间轴效果 |
