contains 之 點擊元素外位置隱藏元素

contains 之 點擊元素外位置隱藏元素

api：

contains   檢測一個元素包含在另一個元素之內  詳解：http://www.runoob.com/jquery/misc-contains.html

原理：

監聽click事件，當點擊時判斷點擊位置是否包含在目標元素內，若判斷通過則隱藏

代碼：

// 創建click監聽
  mounted () {
    document.addEventListener('click', this.queryHide)
  },
// 清除click監聽
  beforeDestroy () {
    document.removeEventListener('click',this.queryHide)
  },
  methods: {
    queryHide (e) {
      if ((!this.$refs.queryBox.contains(e.target)) && (!this.$refs.queryDown.contains(e.target))) {
    /* 關閉元素 */
        this.show = false
      }
    }
  }

注意：

1.監聽需要清除，否則控制台會報錯，雖然不影響使用

2.一般判斷需要判斷需要關閉的元素和開啟這個元素的按鈕

3.ref替代了jquery和js的dom選擇，當不適用vue的時候可以直接使用dom選擇器完成以上操作

 

 

鑽研不已，轉載請注明出處。。。。。