demo 原始链接:https://vux.li/demos/v2/#/component/clocker
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <p style=\"padding:15px;\">\n <span> {{ $t('Basic Usage') }}: </span>\n <clocker :time=\"time1\"></clocker>\n </p>\n\n <group :title=\" $t('Use in cell') \">\n <cell :title=\" $t('Date: 2018-08-01') \">\n <clocker time=\"2018-08-01\"></clocker>\n </cell>\n </group>\n\n <group :title=\" $t('Custom template') \">\n <cell :title=\" $t('Date: 2018-08-01') \">\n <clocker time=\"2018-08-01\">\n <span style=\"color:red\">%D 天</span>\n <span style=\"color:green\">%H 小时</span>\n <span style=\"color:blue\">%M 分 %S 秒</span>\n </clocker>\n </cell>\n <cell title=\"2018-08-08\">\n <clocker time=\"2018-08-08\">\n <span class=\"day\">%_D1</span>\n <span class=\"day\">%_D2</span>\n <span class=\"day\">%_D3</span>天\n <span class=\"day\">%_H1</span>\n <span class=\"day\">%_H2</span>时\n <span class=\"day\">%_M1</span>\n <span class=\"day\">%_M2</span>分\n <span class=\"day\">%_S1</span>\n <span class=\"day\">%_S2</span>秒\n </clocker>\n </cell>\n </group>\n\n </div>\n</template>\n\n\n\n<script>\nimport { Clocker, Cell, Group } from 'vux'\n\nexport default {\n components: {\n Clocker,\n Cell,\n Group\n },\n created () {\n setTimeout(() => {\n this.time1 = '2018-08-13 22:54'\n }, 5000)\n },\n data () {\n return {\n time1: '2018-07-13 21:54'\n }\n }\n}\n</script>\n\n<style scoped>\n.day {\n background-color:#000;\n color:#fff;\n text-align:center;\n display:inline-block;\n padding:0 3px;\n border-radius:3px;\n}\n</style>\n\n
\n