使用element-ui的Clickoutside指令,解决点击其他div关闭自定义下拉树组件的下拉框
1)在组件中引入element-ui的Clickoutside指令
import Clickoutside from 'element-ui/src/utils/clickoutside'
2)在组件directives中写入指令Clickoutside
@Component({
name: 'search-slide',
directives: { Clickoutside },
})
3)页面中使用指令v-clickoutside,代码如下:
<div class="search_slide_input" v-clickoutside="handleClickOutside">
4)添加handleClickOutside方法:
// 点击下拉树之外的dom,隐藏下拉树弹框
handleClickOutside() {
this.showSlide = false;
}