46 lines
2.1 KiB
Vue
46 lines
2.1 KiB
Vue
<template>
|
||
<yd-layout title="CountDown">
|
||
|
||
<yd-cell-group title="普通调用" class="demo-small-pitch">
|
||
<yd-cell-item>
|
||
<span slot="left">默认模板：</span>
|
||
<yd-countdown slot="right" time="2019/06/06 06:06:06"></yd-countdown>
|
||
</yd-cell-item>
|
||
<yd-cell-item>
|
||
<span slot="left">自定义参数模板：</span>
|
||
<yd-countdown slot="right" time="2019/06/06 06:06:06" format="{%s}秒】{%m}分】{%h}时】{%d}天】"></yd-countdown>
|
||
</yd-cell-item>
|
||
<yd-cell-item>
|
||
<span slot="left">传入时间为（秒）：</span>
|
||
<yd-countdown slot="right" :time="666666" timetype="second"></yd-countdown>
|
||
</yd-cell-item>
|
||
<yd-cell-item>
|
||
<span slot="left">传入时间为（时间戳）：</span>
|
||
<yd-countdown slot="right" :time="1559772366" timetype="timestamp"></yd-countdown>
|
||
</yd-cell-item>
|
||
</yd-cell-group>
|
||
|
||
<yd-cell-group title="通过Slot自定义HTML模板">
|
||
<yd-cell-item>
|
||
<span slot="left">个位十位一体：</span>
|
||
<yd-countdown slot="right" time="2019/08/08 08:08:08" class="demo-countdown">
|
||
<span style="color:red;">{%d}<i>天</i></span>
|
||
<span style="color:gray;">{%h}<i>时</i></span>
|
||
<span style="color:blue;">{%m}<i>分</i></span>
|
||
<span style="color:orange;">{%s}<i>秒</i></span>
|
||
</yd-countdown>
|
||
</yd-cell-item>
|
||
<yd-cell-item>
|
||
<span slot="left">个位十位分开：</span>
|
||
<yd-countdown slot="right" time="2019/08/08 08:08:08" class="demo-countdown">
|
||
<em>{%d0}</em><em>{%d1}</em><em>{%d2}</em>天
|
||
<em>{%h1}</em><em>{%h2}</em>小时
|
||
<em>{%m1}</em><em>{%m2}</em>时
|
||
<em>{%s1}</em><em>{%s2}</em>秒
|
||
</yd-countdown>
|
||
</yd-cell-item>
|
||
</yd-cell-group>
|
||
|
||
</yd-layout>
|
||
</template>
|