<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){
vue 点击出现下拉菜单,点击下拉菜单以外都要关闭菜单
最新推荐文章于 2024-07-19 14:23:33 发布