vue里实现点击显示模态框点击自身以外隐藏模态框

最新推荐文章于 2025-05-14 21:59:35 发布

遥远的她'

最新推荐文章于 2025-05-14 21:59:35 发布

阅读量5.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 显示隐藏模态框文章标签：点击显示隐藏模态框页面监听 vue

本文链接：https://blog.youkuaiyun.com/a871805820/article/details/94140149

Vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

显示隐藏模态框

1 篇文章

订阅专栏

本文详细介绍了如何使用自定义变量和事件监听实现一个模态框的显示与隐藏功能。通过给模态框添加类名，并利用Vue.js的数据绑定特性，实现了点击按钮显示模态框，点击模态框外部隐藏模态框的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前阵子做到一个需求是要点击某个按钮弹出个模态框，然后点击模态框的时候模态框还在，点击模态框外部任意区域隐藏模态框，我网上找了下关于这方面的博客很少（也可能是我找的方式不对，哈哈）
首先自己先做好一个模态框的结构，然后给这个结构赋予类名，用一个自定义变量控制这个模态框显示与隐藏

	<div v-if='showBox'>
		<div class='show-parent'>
			<div class="shard">
	          <div class="show-inner">
	            <div>申请次数</div>
	            <div>1天内</div>
	            <div>7天内</div>
	          </div>
	        </div>
		</div>
	</div>

	<span class='show' @click='show'></span>

	export default {
		data() {
			return {
				showBox: false
			}
		},
		methods: {
			show() {
				// 点击的时候显示模态框
				this.showBox = true	
			},
			// 在这里在定义个方法用来监听页面的click事件
			hideBox() {
				document.addEventListener('click', (e) => {
						// 如果当前点击的这个对象是这个模态框的话
					if((e.target).closest('.show-parent')) {
					//  那么这个模态框还是显示的
						this.showBox = true
					} else if(!(e.target).closest('.show')) {
					// 如果当前点击的这个对象是这个show按钮以外的对象，那么这个模态框就隐藏
						this.showBox = false
					}
				})
			}	
		},
		mounted() {
			// 页面加载的时候调用监听
			this.hideBox()
		}
	}