<template>
    <div>

        <van-nav-bar
                title="checkbox"
                left-arrow
                @click-left="back"
        />
        <div class="page">
            <ul>
                <li class="section">
                    <y-check-group :list-result.sync="sex" radio>
                        <y-checkbox value="1" custom-class="abc">男</y-checkbox>
                        <y-checkbox value="-1">女</y-checkbox>
                    </y-check-group>

                </li>
                <li class="section">
                    <y-check-group>
                        <y-checkbox v-model="bool">男</y-checkbox>
                    </y-check-group>

                </li>
                <li class="section">
                    <y-check-group>
                        <y-checkbox v-model="bool" readonly>男</y-checkbox>
                    </y-check-group>

                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {NavBar} from 'vant';
    import yCheckbox from '../components/yCheckbox'
    import yCheckGroup from '../components/yCheckGroup'

    export default {
        components: {
            [NavBar.name]: NavBar,
            yCheckGroup,
            yCheckbox,
        },
        data:()=>{
            return {
                sex:"-1",
                tipsShow:false,
                sexList:"",
                bool:false,
            }
        },
        methods:{
            "fn_click"(e){
                //yToast.success("success");
                //yToast.error("error");
                yToast.loading();
                setTimeout(yToast.clear,100000);
            },
            back:()=>{
                window.history.go(-1);
            }
        },
        mounted(){
            window.test = this;
        },
        watch:{
            bool(){
                const self = this;
                setTimeout(t=>{

                    self.bool = true;
                },10)
            }
        }
    }
</script>

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