demo 原始链接:https://vux.li/demos/v2/#/component/timeline
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n\t<div class=\"timeline-demo\">\n\t\t<timeline>\n\t\t\t<timeline-item>\n\t\t\t\t<h4 class=\"recent\">【广东】 广州市 已发出</h4>\n\t\t\t\t<p class=\"recent\">2016-04-17 12:00:00</p>\n\t\t\t</timeline-item>\n\t\t\t<timeline-item>\n\t\t\t\t<h4> 申通快递员 广东广州 收件员 xxx 已揽件</h4>\n\t\t\t\t<p>2016-04-16 10:23:00</p>\n\t\t\t</timeline-item>\n\t\t\t<timeline-item>\n\t\t\t\t<h4> 商家正在通知快递公司揽件</h4>\n\t\t\t\t<p>2016-04-15 9:00:00</p>\n\t\t\t</timeline-item>\n\t\t</timeline>\n\t\t<timeline>\n\t\t\t<timeline-item v-for=\"(i, index) in count\" :key=\"index\">\n\t\t\t\t<h4 :class=\"[i === 0 ? 'recent' : '']\">Timeline Node {{i + 1}}</h4>\n\t\t\t\t<p :class=\"[i === 0 ? 'recent' : '']\">index {{i + 1}}</p>\n\t\t\t</timeline-item>\n\t\t</timeline>\n <x-button type=\"primary\" @click.native=\"count = 6\"> Set to 6 nodes</x-button>\n <x-button type=\"primary\" @click.native=\"count = 3\"> Set to 3 nodes</x-button>\n\t</div>\n</template>\n\n<script>\nimport { Timeline, TimelineItem, XButton } from 'vux'\n\nexport default {\n components: {\n Timeline,\n TimelineItem,\n XButton\n },\n data () {\n return {\n count: 3\n }\n }\n}\n</script>\n\n<style lang=\"less\">\n.timeline-demo {\n\tp {\n\t\tcolor: #888;\n\t\tfont-size: 0.8rem;\n\t}\n\th4 {\n\t\tcolor: #666;\n\t\tfont-weight: normal;\n\t}\n\t.recent {\n\t\tcolor: rgb(4, 190, 2)\n\t}\n}\n</style>\n\n
\n