<template>
    <docs-layout title="数字动画">
        <h2>概述</h2>
        <h3>以动画方式显示数值数据组件。</h3>

        <h2>按需引入</h2>
        <docs-import>
            <pre class="pre" v-hljs><code class="js">import Vue from 'vue';<br />import {CountUp} from 'vue-ydui/dist/lib.rem/countup';<br />/* 使用px：import {CountUp} from 'vue-ydui/dist/lib.px/countup'; */<br /><br />Vue.component(CountUp.name, CountUp);</code></pre>
        </docs-import>

        <h2>代码示例</h2>

        <div class="fuck">
            <docs-demo title="调用">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-countup<br />            endnum="1200"<br />            duration="3"<br />            decimals="2"<br />            separator=","<br />            prefix="$"<br />            suffix="美元"<br />    &gt;&lt;/yd-countup&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        <br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <div style="font-size: 40px;padding: 10px;">
                        <yd-countup
                                endnum="1200"
                                duration="2"
                                decimals="2"
                                separator=","
                                prefix="$"
                                suffix="美元"
                        ></yd-countup>
                    </div>
                </div>
                <div slot="interpre">
                    <p>设置<span>endnum</span>控制结束值。</p>
                </div>
            </docs-demo>
            <docs-demo title="手动控制开始">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-countup endnum="100" suffix="%" :start="start1"&gt;&lt;/yd-countup&gt;<br />    &lt;yd-button size="small" @click.native="start1 = true"&gt;开始&lt;/yd-button&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                start1: false<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <div style="font-size: 40px;padding: 10px;">
                        <yd-countup endnum="100" suffix="%" :start="start1"></yd-countup>
                        <yd-button style="margin-left: .5rem;vertical-align: top;" size="small" @click.native="start1 = true">开始</yd-button>
                    </div>
                </div>
                <div slot="interpre">
                    <p>参数<span>:start</span>绑定到本地变量<span>start1(false)</span>，通过改变<span>start1(true)</span>的值即开始。</p>
                </div>
            </docs-demo>
        </div>

        <h2>API</h2>

        <h3><strong>yd-countup</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>start</td>
                <td>是否立即开始动画</td>
                <td>Boolean</td>
                <td>-</td>
                <td>true</td>
            </tr>
            <tr>
                <td>startnum</td>
                <td>开始数值</td>
                <td>Number</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>endnum</td>
                <td>结束数值</td>
                <td>Number</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>decimals</td>
                <td>小数的位数</td>
                <td>Number</td>
                <td>-</td>
                <td>0</td>
            </tr>
            <tr>
                <td>duration</td>
                <td>动画执行时间</td>
                <td>Number</td>
                <td>-</td>
                <td>2</td>
            </tr>
            <tr>
                <td>useEasing</td>
                <td>是否使用easy动画效果</td>
                <td>Boolean</td>
                <td>-</td>
                <td>false</td>
            </tr>
            <tr>
                <td>separator</td>
                <td>每隔三位的分隔符</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>prefix</td>
                <td>数字前头标识</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>suffix</td>
                <td>数字末尾标识</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>callback</td>
                <td>动画执行完毕调用方法</td>
                <td>Function</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </docs-table>
    </docs-layout>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                start1: false
            }
        }
    }
</script>
