vue 点击出现下拉菜单,点击下拉菜单以外都要关闭菜单

<template>
    <div class="home" v-cloak>
       
        <div class="menu">
            <p>下拉菜单</p>
            <div class="main" v-clickoutside="handleClose">
                <button @click="show = !show">点击显示下拉菜单</button>
                <div class="dropdown" v-show = "show"> 
                    <p>下拉框的内容,点击外面区域可以关闭</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
           
            show:false
        };
    },
   
        // 下拉菜单 
        handleClose(){
            this.show = false;
        }
    },
         //    自定义指令clickoutside绑定了一个函数handleClose用来关闭菜单
    directives:{
        clickoutside:{
            bind:function(el,binding,vnode){