vue中点击div之外区域实现div的隐藏

html部分:<template> <div class=“box” @click=“showSetting”> <div class=“settingCon” @click=“settingEvent($event)"> <span @click=“clickSetting”>点击设置</span> <div v-show=“showSettingCon”>显示设置内容</div> </div> </div></template>逻辑部分：<script> export default { data(){ return{ showSettingCon:false, } }, methods:{ showSetting(){ this.$set(this, ‘showSettingCon’, false); //全局区域内点击时showSettingCon均为false }, settingEvent(event){ event.stopPropagation(); //此区域不受上面方法的影响 }, clickSetting(){ this.$set(this, ‘showSettingCon’, !this.showSettingCon) //事件触发时showSettingCon显示隐藏状态互换 } } }</script>css部分：<style scoped lang=“scss”> .box{ width: 100%; height: 100%; } .settingCon{ position: relative; b{ width: 300px; height: 50px; } div{ width: 500px; height: 300px; background: lightpink; position: absolute; top: 50px; } }</style>