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

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

	<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()
		}
	}