zoukankan      html  css  js  c++  java
  • vue 阻止冒泡弹窗小案例( 知识点:@click.stop=''")

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>冒泡弹窗</title>
        <script src="js/vue.js"></script>
        <style>
    
    
    
            /* 账号密码输入框在屏幕正中央 */
            #d2{
                background: rgba(0,0,0,0.6);
                width: 100%;
                margin: auto;
                position: fixed;
                top:0;
                left:0;
                right:0;
                bottom: 0;
            }
            #d3{
                background: #ffff;
                border-radius: 5px;  /* 边框圆角 */
                padding-top: 15px;
                padding-left:30px;
                padding-bottom: 15px;
                width:290px;
                height:160px;
                position: fixed;
                margin: auto;
                left: 0;    /*  当上下左右的距离窗口一样的时候,输入框就会被置于屏幕正中间 */
                right:0;
                top:0;
                bottom: 0;
    
    
            }
    
        </style>
    </head>
    
    <body>
    
        <div id="d1">
            <h1 @click="is_show=true">点击产生窗口</h1>
            <div id="d2" v-show="is_show" @click="is_show=false">
                <!--<div id="d3" v-show="is_show" @click="is_show=false">-->
                <div id="d3" @click.stop="">
                    账号: <input type="text"><br><br>
                    密码: <input type="password"><br><br>
                    <input type="submit" value="提交">
                </div>
            </div>
    
        </div>
    
    <script>
        let vm = new Vue({
            el: "#d1",
            data: {
                is_show: false,
            },
            methods: {},
    
        })
    
    </script>
    </body>
    </html>
    阻止冒泡弹窗
  • 相关阅读:
    Oracle Golden Gate
    DNS
    RMAN 管理
    黄伟-RAC生产库现场调整本分策略实战
    Linux下RAID技术
    OCP之黄伟 2
    About NULL Value
    OCP之黄伟
    Table
    Perl的简单变量
  • 原文地址:https://www.cnblogs.com/one-tom/p/10522069.html
Copyright © 2011-2022 走看看