<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 {Spinner} from 'vue-ydui/dist/lib.rem/spinner';<br />/* 使用px：import {Spinner} from 'vue-ydui/dist/lib.px/spinner'; */<br /><br />Vue.component(Spinner.name, Spinner);</code></pre>
        </docs-import>

        <h2>代码示例</h2>

        <div class="fuck">
            <docs-demo title="最大值为75，累计值为3">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;div&gt;<br />        &lt;yd-spinner max="75" unit="3" v-model="spinner1"&gt;&lt;/yd-spinner&gt;<br />        &lt;span&gt;[model: spinner1 = <span>{</span>{spinner1}<span>}</span>]&lt;/span&gt;<br />    &lt;/div&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                spinner1: 0<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-spinner max="75" unit="3" v-model="spinner1"></yd-spinner>
                    <span style="margin-left: 20px;vertical-align: top;">【model: spinner1 = {{spinner1}}】</span>
                </div>
                <div slot="interpre">
                    <p>将<span>yd-spinner</span>组件的 v-model 绑定到一个本地变量<span>spinner1</span>，通过加减改变其值；</p>
                    <p>设置最大值参数<span>max</span>为75；设置累计值参数<span>unit</span>为3；</p>
                    <p>若不设置最小值，则默认为累计值3。</p>
                </div>
            </docs-demo>
            <docs-demo title="设置最小值为12，累计值为3">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;div&gt;<br />        &lt;yd-spinner min="12" unit="3" v-model="spinner2"&gt;&lt;/yd-spinner&gt;<br />        &lt;span&gt;[model: spinner2 = <span>{</span>{spinner2}<span>}</span>]&lt;/span&gt;<br />    &lt;/div&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                spinner2: 0<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-spinner min="12" unit="3" v-model="spinner2"></yd-spinner>
                    <span style="margin-left: 20px;vertical-align: top;">【model: spinner2 = {{spinner2}}】</span>
                </div>
                <div slot="interpre">
                    <p>设置最小值参数<span>min</span>为12；设置累计值参数<span>unit</span>为3。</p>
                </div>
            </docs-demo>
            <docs-demo title="不设置最大值/最小值/累计值">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;div&gt;<br />        &lt;yd-spinner v-model="spinner3"&gt;&lt;/yd-spinner&gt;<br />        &lt;span&gt;[model: spinner3 = <span>{</span>{spinner3}<span>}</span>]&lt;/span&gt;<br />    &lt;/div&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                spinner3: 0<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-spinner v-model="spinner3"></yd-spinner>
                    <span style="margin-left: 20px;vertical-align: top;">【model: spinner3 = {{spinner3}}】</span>
                </div>
                <div slot="interpre">
                    <p>默认累计值和最小值为1。</p>
                </div>
            </docs-demo>
            <docs-demo title="设置默认值为150，累计值为5">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;div&gt;<br />        &lt;yd-spinner unit="5" v-model="spinner4"&gt;&lt;/yd-spinner&gt;<br />        &lt;span&gt;[model: spinner4 = <span>{</span>{spinner4}<span>}</span>]&lt;/span&gt;<br />    &lt;/div&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                spinner4: 150<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-spinner unit="5" v-model="spinner4"></yd-spinner>
                    <span style="margin-left: 20px;vertical-align: top;">【model: spinner4 = {{spinner4}}】</span>
                </div>
                <div slot="interpre">
                    <p>设置本地变量<span>spinner4</span>的值为150即可。</p>
                </div>
            </docs-demo>
            <docs-demo title="禁止修改">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;div&gt;<br />        &lt;yd-spinner readonly v-model="spinner5"&gt;&lt;/yd-spinner&gt;<br />        &lt;span&gt;[model: spinner5 = <span>{</span>{spinner5}<span>}</span>]&lt;/span&gt;<br />    &lt;/div&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                spinner5: 0<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-spinner readonly v-model="spinner5"></yd-spinner>
                    <span style="margin-left: 20px;vertical-align: top;">【model: spinner5 = {{spinner5}}】</span>
                </div>
                <div slot="interpre">
                    <p>在<span>yd-spinner</span>组件上添加<span>readonly</span>或<span>:readonly="true"</span>即可。</p>
                </div>
            </docs-demo>
            <docs-demo title="禁用长按快速加减">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;div&gt;<br />        &lt;yd-spinner :longpress="false" v-model="spinner6"&gt;&lt;/yd-spinner&gt;<br />        &lt;span&gt;[model: spinner6 = <span>{</span>{spinner6}<span>}</span>]&lt;/span&gt;<br />    &lt;/div&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                spinner6: 0<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-spinner :longpress="false" v-model="spinner6"></yd-spinner>
                    <span style="margin-left: 20px;vertical-align: top;">【model: spinner6 = {{spinner6}}】</span>
                </div>
                <div slot="interpre">
                    <p>设置参数<span>:longpress="false"</span>即可。</p>
                </div>
            </docs-demo>
        </div>

        <h2>API</h2>
        <h3><strong>yd-spinner</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>unit</td>
                <td>累计值</td>
                <td>Number</td>
                <td>-</td>
                <td>1</td>
            </tr>
            <tr>
                <td>max</td>
                <td>最大值</td>
                <td>Number</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>min</td>
                <td>最小值（不设置最小值，则默认为累计值）</td>
                <td>Number</td>
                <td>-</td>
                <td>累计值</td>
            </tr>
            <tr>
                <td>readonly</td>
                <td>是否只读</td>
                <td>Boolean</td>
                <td>-</td>
                <td>false</td>
            </tr>
            <tr>
                <td>longpress</td>
                <td>是否支持长按快速加减</td>
                <td>Boolean</td>
                <td>-</td>
                <td>true</td>
            </tr>
        </docs-table>
    </docs-layout>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                spinner1: 0,
                spinner2: 0,
                spinner3: 0,
                spinner4: 150,
                spinner5: 0,
                spinner6: 0
            }
        }
    }
</script>
