<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 {Switch} from 'vue-ydui/dist/lib.rem/switch';<br />/* 使用px：import {Switch} from 'vue-ydui/dist/lib.px/switch'; */<br /><br />Vue.component(Switch.name, Switch);</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;div&gt;<br />        &lt;yd-switch v-model="switch1"&gt;&lt;/yd-switch&gt;<br />        &lt;p&gt;【model: switch1 = <span>{</span>{switch1}<span>}</span>】&lt;/p&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 />                switch1: false<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-switch v-model="switch1"></yd-switch>
                    <p style="margin-top: 10px;">【model: switch1 = {{switch1}}】</p>
                </div>
                <div slot="interpre">
                    <p>将 <span>yd-switch</span> 组件的 v-model 绑定到一个本地变量 <span>switch1</span>，通过操作 switch组件 改变<span>switch1</span>的值。</p>
                </div>
            </docs-demo>
        </div>
    </docs-layout>
</template>

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