vue.js 點擊目標元素顯示div，點擊目標元素外其他位置，隱藏div

前言

因需求特殊，大家都常常會自己寫彈窗，彈層等。點擊目標元素（如按鈕，輸入框等等），顯示div；點擊目標元素外其他位置，隱藏div。那麼用vue.js，要怎麼實現呢？

實現思路

1. 給頁面最外出div加點擊事件,設置是否顯示div參數爲false：@click=“showBox= false”
2. 給目標元素加點擊事件，設置是否顯示div參數爲true， 並給點擊事件設置阻止單擊事件繼續傳播：@click.stop=“showBox= true”

那麼就直接上代碼了

<template>
	  <div @click="showBox=false">                                        <!-- 最外層div -->
	  
	  		<p>其他內容</p>
	  		<p>其他內容</p>
	  		<div v-show="showBox"> test div</div>                         <!-- 是否顯示該div -->
	  		<span @click.stop="showBox=true">點擊顯示div</span>            <!-- 目標元素 -->
	  		<p>其他內容</p>
	  		<p>其他內容</p>
	  		
	    </div>
</template>

<script>
export default {
	data() {
			return {
					showBox: false,
				}
		},
	}
</script>