vue는 빈 공간을 클릭하여 div를 숨기고 표시합니다.

이번에는 vue가 빈 공간을 클릭하여 div 숨기기 및 표시 작업을 하고, vue가 빈 공간을 클릭하여 div 숨기기 및 표시 작업을 할 때의 notes를 가져오겠습니다. 다음은 실제 사례입니다. .

1. 반드시 문서에 클릭 이벤트 리스너를 추가하세요
2. 클릭 이벤트가 발생하면 현재 개체가 클릭되었는지 확인하세요
이 아이디어와 지침을 결합하여 구현하겠습니다.

vue 명령어에 대한 간략한 소개

명령어 정의 개체는 다음 후크 기능을 제공할 수 있습니다(모두 선택 사항).

1. bind: 한 번만 호출되며, 명령어가 첫 번째 요소에 바인딩될 때 호출됩니다. 시간. 여기에서 일회성 초기화 설정을 수행할 수 있습니다.

2. inserted: 바인딩된 요소가 상위 노드에 삽입될 때 호출됩니다(상위 노드만 존재하도록 보장되지만 반드시 문서에 삽입될 필요는 없습니다).

3. update: 구성 요소의 VNode가 업데이트될 때 호출되지만 해당 하위 VNode가 업데이트되기 전에 발생할 수 있습니다. 지시어의 값은 변경되었을 수도 있고 변경되지 않았을 수도 있습니다. 하지만 업데이트 전과 후의 값을 비교하여 불필요한 템플릿 업데이트를 무시할 수 있습니다(자세한 후크기능 매개변수아래 참조).

4. comComponentUpdated: 명령어가 있는 구성 요소의 모든 VNode와 해당 하위 VNode가 업데이트된 후에 호출됩니다.

5. unbind: 한 번만 호출되며, 명령이 요소에서 바인딩 해제될 때 호출됩니다.

다음으로 후크 함수 의 매개변수(예: el, 바인딩, vnode 및 oldVnode)를 살펴보겠습니다.

코드 구현

명령 개체를 생성하고 코드에 분석을 넣습니다

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 내용을 주목하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다!

추천 도서:

요소 순회를 구현하는 요소 순회에 대한 자세한 설명

로그인 중 이미지 인증 코드 기능을 구현하는 노드

위 내용은 vue는 빈 공간을 클릭하여 div를 숨기고 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!