vue를 사용하여 빈 공간을 클릭하여 div를 숨기는 방법

이번에는 vue를 사용하여 빈칸을 클릭하여 div를 숨기는 방법을 알려드리겠습니다. vue를 사용하여 빈칸을 클릭하여 div를 숨길 때 주의해야 할 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

어떻게 간단하게 구현하나요?

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를 사용하여 카운트다운 버튼을 구현하는 방법

Vue를 사용하여 양방향 데이터 바인딩을 작성하는 방법

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