<template>
    <div>
        <van-nav-bar
                title="遮罩层1212"
                left-arrow
                @click-left="back"
        />
        <div class="page">
            <ul>
                <li class="section">
                    <y-button topic="main" text="从下弹出的弹层" v-on:click="fn_click"></y-button>
                    <y-popup :show.sync="tipsShow">
                        <div style="max-height: 100px;overflow: scroll">
                            1212 <br/>
                            2222222<br/>
                            33333<br/>
                            222222<br/>
                            1111111<br/>
                            4444444<br/>
                            111111<br/>
                            22222222<br/>
                            4444444444<br/>
                            <input type="text"/>
                        </div>
                    </y-popup>
                </li>
                <li class="section">
                    <y-button topic="main" text="弹窗" v-on:click="tipsShowB=true"></y-button>
                    <y-popup :show.sync="tipsShowB"></y-popup>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {NavBar} from 'vant';
    import yButton from '../components/yButton'
    import yPopup from "../components/yPopup";

    export default {
        components: {
            [NavBar.name]: NavBar,
            yButton,
            yPopup
        },
        data:()=>{
            return {
                tipsShow:false,
                tipsShowB:false,
            }
        },
        methods:{
            "fn_click"(e){
                this.tipsShow = true;
            },
            back:()=>{
                window.history.go(-1);
            }
        }

    }
</script>

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