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;
}
