| 1 |
- import{e as t,g as e,t as n,G as o,o as d}from"./vendor.21cda21c.js";const a={class:"markdown-body"},s=o('<h1>countdown组件</h1><h3>介绍</h3><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\n// vue\nimport { CountDown } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(CountDown);\n</code></pre><h3>基础用法</h3><pre><code class="language-html"><nut-countdown :end-time="end" ></nut-countdown>\n</code></pre><pre><code class="language-javascript">setup() {\n const state = reactive({\n end: Date.now() + 50 * 1000,\n });\n return {\n ...toRefs(state)\n };\n}\n</code></pre><h3>显示天</h3><pre><code class="language-html"><nut-countdown :end-time="end" show-days ></nut-countdown>\n</code></pre><h3>以服务端的时间为准</h3><pre><code class="language-html"><nut-countdown :start-time="serverTime" :end-time="end" show-days ></nut-countdown>\n</code></pre><pre><code class="language-javascript">setup() {\n const state = reactive({\n serverTime: Date.now() - 30 * 1000,\n end: Date.now() + 50 * 1000,\n });\n return {\n ...toRefs(state)\n };\n}\n</code></pre><h3>显示为 天时分秒</h3><pre><code class="language-html"><nut-countdown show-days show-plain-text :end-time="end"></nut-countdown>\n</code></pre><pre><code class="language-javascript">setup() {\n const state = reactive({\n end: Date.now() + 50 * 1000,\n });\n return {\n ...toRefs(state)\n };\n}\n</code></pre><h3>异步更新结束时间</h3><pre><code class="language-html"><nut-countdown show-days show-plain-text :end-time="asyncEnd" ></nut-countdown>\n</code></pre><pre><code class="language-javascript">setup() {\n const state = reactive({\n asyncEnd: 0,\n });\n return {\n ...toRefs(state)\n };\n}\n</code></pre><h3>控制开始和暂停的倒计时</h3>',19),r={class:"language-html"},u=o('<pre><code class="language-javascript">setup() {\n const state = reactive({\n paused: false,\n end: Date.now() + 50 * 1000,\n });\n\n const toggle = ()=> {\n state.paused = !state.paused;\n }\n const onpaused = (v)=> {\n console.log('paused: ', v);\n }\n const onrestart = (v)=> {\n console.log('restart: ', v);\n }\n return {\n toggle,\n onpaused,\n onrestart,\n ...toRefs(state)\n };\n}\n</code></pre><h3>自定义展示</h3><pre><code class="language-html"><nut-countdown v-model="resetTime" :endTime="end">\n <div class="countdown-part-box">\n <div class="part-item-symbol"> resetTime.d 天</div>\n <div class="part-item h"> resetTime.h </div>\n <span class="part-item-symbol">:</span>\n <div class="part-item m"> resetTime.m </div>\n <span class="part-item-symbol">:</span>\n <div class="part-item s"> resetTime.s </div>\n </div>\n</nut-countdown>\n</code></pre><pre><code class="language-javascript">setup() {\n const state = reactive({\n end: Date.now() + 50 * 1000,\n resetTime: {\n d: '1',\n h: '00',\n m: '00',\n s: '00'\n }\n });\n return {\n ...toRefs(state)\n };\n}\n</code></pre><h3>API</h3><h3>Props</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model</td><td>当前时间，自定义展示内容时生效</td><td>Object</td><td>{}</td></tr><tr><td>start-time</td><td>开始时间</td><td>String, Number</td><td>Date.now()</td></tr><tr><td>end-time</td><td>结束时间</td><td>String, Number</td><td>Date.now()</td></tr><tr><td>show-days</td><td>是否显示天</td><td>Boolean</td><td>false</td></tr><tr><td>show-plain-text</td><td>显示为纯文本</td><td>Boolean</td><td>false</td></tr><tr><td>paused</td><td>是否暂停</td><td>Boolean</td><td>false</td></tr></tbody></table><h3>Event</h3><table><thead><tr><th>字段</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>on-end</td><td>倒计时结束时</td><td>剩余时间戳</td></tr><tr><td>on-paused</td><td>暂停时</td><td>剩余时间戳</td></tr><tr><td>on-restart</td><td>暂停时</td><td>剩余时间戳</td></tr></tbody></table>',9),l={setup:o=>(o,l)=>(d(),t("div",a,[s,e("pre",null,[e("code",r,'<nut-cell>\n <nut-countdown :endTime="end" :paused="paused" @on-paused="onpaused" @on-restart="onrestart" />\n <div style="position:absolute;right:10px;top:9px">\n <nut-button type="primary" size=\'small\' @click="toggle">'+n(o.paused?"start":"stop")+"</nut-button>\n </div>\n</nut-cell>\n",1)]),u]))};export{l as default};
|
