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

效果：

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

相关阅读:
自然语言处理 Paddle NLP - 快递单信息抽取 (ERNIE 1.0)
【matplotlib 实战】--南丁格尔玫瑰图
在playfab server上部署unreal linux server
了解交互设计：深入研究五个重要维度
【JavaSE专栏53】Java集合类HashMap详解
含文档+PPT+源码等]精品spring boot+MySQL学生在线考试系统vue[包运行成功]计算机Java毕业设计SSM项目源码
React项目部署 - Nginx配置
如何实现通过Leaflet加载dwg格式的CAD图
Koa.js搭建简单服务器，连接数据库
zabbix监控触发器与报警动作

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

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

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