Vue.js drop-down box component closes the menu when clicking outside the menu bar Author: Chuwen Time: 2021-08-23 Classification: Vue.js , JavaScript <trans data-src="## Menu.vue">## Menu.vue</trans> <trans data-src="> 菜单组件">>Menu Components</trans> <trans data-src="> !">> !</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2021/08/23/2193569241.png">https://cdn.nowtime.cc/2021/08/23/2193569241.png</trans> <trans data-src=")">)</trans> <trans data-src="```">```</trans> <trans data-src="<template>"><template></trans> <trans data-src="<div class="menu" v-if="show">"><div class="menu" v-if="show"></trans> <trans data-src="<!--"><!--</trans> <trans data-src="假设是菜单组件......-->">Suppose it is a menu component... --></trans> <trans data-src="</div>"></div></trans> <trans data-src="</template>"></template></trans> <trans data-src="<script>"><script></trans> <trans data-src="export default {">export default {</trans> <trans data-src="data(){">data(){</trans> <trans data-src="return {">return {</trans> <trans data-src="show: true,//是否显示菜单">Show: true,//Whether to display the menu</trans> <trans data-src="}">}</trans> <trans data-src="},">},</trans> <trans data-src="mounted() {">mounted() {</trans> <trans data-src="// 在这里加上就可以了">//Just add it here</trans> <trans data-src="document.addEventListener('click', (e) => {">document.addEventListener('click', (e) => {</trans> <trans data-src="// 如果当前组件(菜单组件)的 DOM “不包含” 当前点击的 DOM">//If the DOM of the current component (menu component) "does not contain" the currently clicked DOM</trans> <trans data-src="// 就关闭显示菜单">//Close the display menu</trans> <trans data-src="if (!this.$el.contains(e.target)) this.show = false">if (!this.$el.contains(e.target)) this.show = false</trans> <trans data-src="})">})</trans> <trans data-src="}">}</trans> <trans data-src="}">}</trans> <trans data-src="</script>"></script></trans> <trans data-src="```">```</trans> label: Vue.js , assembly