vue klickt auf die leere Stelle, um das Div auszublenden und anzuzeigen

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zeigen, wie Vue auf eine Leerstelle klickt, um das Ausblenden und Anzeigen von Divs zu bedienen, und wie Vue auf eine Leerstelle klicken kann, um das Ausblenden und Anzeigen von Divs zu bedienen. Das Folgende ist Ein praktischer Fall, werfen wir einen Blick darauf.

1. Fügen Sie dem Dokument auf jeden Fall einen Klickereignis-Listener hinzu.
2. Wenn ein Klickereignis auftritt, stellen Sie fest, ob auf das aktuelle Objekt geklickt wird.
Wir werden es umsetzen, indem wir diese Idee und Anweisungen kombinieren.

Eine kurze Einführung in Vue-Anweisungen

Ein Anweisungsdefinitionsobjekt kann die folgenden Hook-Funktionen bereitstellen (alle optional):

1. bind: Wird nur einmal aufgerufen, wenn die Anweisung zum ersten Mal an ein Element gebunden wird. Hier können einmalige Initialisierungseinstellungen vorgenommen werden.

2. eingefügt: Wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (nur die Existenz des übergeordneten Knotens ist garantiert, wird aber nicht unbedingt in das Dokument eingefügt).

3. Aktualisierung: Wird aufgerufen, wenn der VNode der Komponente aktualisiert wird, kann jedoch erfolgen, bevor der untergeordnete VNode aktualisiert wird. Der Wert der Richtlinie kann sich geändert haben oder auch nicht. Sie können jedoch unnötige Vorlagenaktualisierungen ignorieren, indem Sie die Werte vor und nach der Aktualisierung vergleichen (detaillierte Hook- Funktionsparameter siehe unten).

4. componentUpdated: Wird aufgerufen, nachdem alle VNodes der Komponente, in der sich die Anweisung befindet, und ihre Unter-VNodes aktualisiert wurden.

5. unbind: Wird nur einmal aufgerufen, wenn die Bindung der Anweisung vom Element gelöst wird.

Als nächstes werfen wir einen Blick auf die Parameter der Hook--Funktion (also el, binding, vnode und oldVnode).

Code-Implementierung

Erstellen Sie das Anweisungsobjekt und fügen Sie die Analyse in den Code ein

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

Ich glaube schon Lesen Sie den Fall in diesem Artikel. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Element-Traversal-Implementierung der Element-Traversierung

Knoten implementiert die Bildverifizierungscode-Funktion während anmelden

Das obige ist der detaillierte Inhalt vonvue klickt auf die leere Stelle, um das Div auszublenden und anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!