<template>
    <div>
        <van-nav-bar
                title="switch"
                left-arrow
                @click-left="back"
        />
        <div class="page">
            <ul>
                <li class="section">
                    <y-switch color="main" lock v-model="bool" @click="fnClick"></y-switch>
                </li>
                <li class="section">
                    <y-switch color="main" v-model="bool"></y-switch>
                </li>
                <li class="section">
                    <y-switch color="warning"></y-switch>
                </li>
                <li class="section">
                    <y-switch color="info"></y-switch>
                </li>
                <li class="section">
                    <y-switch color="danger"></y-switch>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {NavBar} from 'vant';
    import yTabs from '../components/yTabs'
    import yDialog from "../components/yDialog";
    import ySwitch from '../components/ySwitch'
    import yTabItem from '../components/yTabItem'

    export default {
        components: {
            [NavBar.name]: NavBar,
            ySwitch,
        },
        data:()=>{
            return {
                bool:false
            }
        },
        methods:{
            fnClick(type){
                const self = this;
                yDialog.confirm("确定打开？").then(data=>{
                    self.bool = true;
                })
            },
            back:()=>{
                window.history.go(-1);
            }
        },
    }
</script>

<style scoped>
    .page {
        padding: 10px;
    }
</style>
