Vue 中通过事件修饰符可阻止事件冒泡
事件修饰符官网链接:https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers
阻止事件冒泡之后,点击之后可进行输入用户名密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<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">show</button>
<!-- <div id="overlay" v-show="isShow" @click="isShow=false">
<div id="center" @click.stop>
<div>用户名:<input type="text"/></div>
<div>密码:<input type="password"/></div>
<div>
<button>登录</button>
</div>
</div>
</div> -->
<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>
效果:
如果不阻止事件冒泡,则在弹出登录框点击用户名或者密码时,登录框会直接消失,效果如下: