vue clicks on the blank space to hide and display the div

This time I will bring you vue to click on the blank space to operate div hiding and displaying, and vue to click on the blank space to operate div hiding and displaying. What are the precautions? Here is a practical case, let's take a look.

1. Definitely add a click event listener to the document
2. When a click event occurs, determine whether the current object is clicked
We will implement this by combining this idea and instructions.

A brief introduction to vue instructions

An instruction definition object can provide the following hook functions (all optional):

1. bind: Called only once, when the instruction is bound to an element for the first time. One-time initialization settings can be performed here.

2. inserted: Called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).

3. update: Called when the VNode of the component is updated, but may occur before its child VNode is updated. The value of the directive may or may not have changed. But you can ignore unnecessary template updates by comparing the values ​​before and after the update (detailed hookfunction parameterssee below).

4. componentUpdated: Called after the VNode of the component where the instruction is located and its sub-VNodes have all been updated.

5. unbind: Called only once, when the instruction is unbound from the element.

Next let’s take a look at the parameters of the hook function (i.e. el, binding, vnode and oldVnode).

Code implementation

Create the instruction object and put the analysis in the code

<template>
 <p>
 <p class="show" v-show="show" v-clickoutside="handleClose">
  显示
 </p>
 </p>
</template>
<script>
const clickoutside = {
 // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
  // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false;
  }
  // 判断指令中是否绑定了函数
      if (binding.expression) {
  // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e);
      }
 }
 // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.vueClickOutside = documentHandler;
    document.addEventListener('click', documentHandler);
  },
  update() {},
  unbind(el, binding) {
 // 解除事件监听
    document.removeEventListener('click', el.vueClickOutside);
    delete el.vueClickOutside;
  },
};
export default {
  name: 'HelloWorld',
  data() {
    return {
      show: true,
    };
  },
  directives: {clickoutside},
  methods: {
    handleClose(e) {
      this.show = false;
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.show {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

I believe I read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Element Traversal implements element traversal in detail

node implements the image verification code function during login

The above is the detailed content of vue clicks on the blank space to hide and display the div. For more information, please follow other related articles on the PHP Chinese website!