vue 模态框场景阻止事件冒泡

Vue 中通过事件修饰符可阻止事件冒泡

事件修饰符官网链接：https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers

阻止事件冒泡之后，点击之后可进行输入用户名密码

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vuetitle>
    <script src="lib/vue.js">script>
    <style>
        #overlay {
            background: rgba(0, 0, 0, 0.6);
            width: 100%;
            margin: auto;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        #center {
            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="box">
       <button @click="isShow=true">showbutton>

       
       <div id="overlay" v-show="isShow" @click.self="isShow=false">
        <div id="center">
            <div>用户名：<input type="text"/>div>
            <div>密码：<input type="password"/>div>
            <div>
                <button>登录button>
            div>
        div>
      div>
    div>

    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                isShow: false,
            }
        })
    script>
    
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

效果：

在这里插入图片描述
如果不阻止事件冒泡，则在弹出登录框点击用户名或者密码时，登录框会直接消失，效果如下：

相关阅读:
[c语言]深入返回值为函数指针的函数
gcc安装问题总结
SPA项目开发之首页导航+左侧菜单
MySQL热点行更新
Vue源码学习(三):<templete>渲染第二步,创建ast语法树
mybatis：mybatis-generator插件使用
【Websocket 第二篇】问题解惑
【鸿蒙手机】获取UDID，并添加签名认证
安装CDH配置本地CM、CDH源时，配置Apache Web服务器一直显示403看不到目录
谷歌评价：从服务器检索信息时出错。DF-DFERH-01

原文地址：https://blog.csdn.net/weixin_43229819/article/details/127863144

vue 模态框场景 阻止事件冒泡

vue 模态框场景阻止事件冒泡