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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM