contains 之 点击元素外位置隐藏元素

Posted 2021-02-15 s313139232

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选择器完成以上操作

 

 

钻研不已，转载请注明出处。。。。。