>  기사  >  웹 프론트엔드  >  Vue에서 구성 요소 외부를 클릭하여 구성 요소를 닫는 방법(자세한 튜토리얼)

Vue에서 구성 요소 외부를 클릭하여 구성 요소를 닫는 방법(자세한 튜토리얼)

亚连
亚连원래의
2018-06-01 09:22:252641검색

이제 Vue에서 컴포넌트 외부 클릭을 기반으로 컴포넌트를 닫는 구현 방법을 공유하겠습니다. 참고할 만한 가치가 있어 모두에게 도움이 되기를 바랍니다.

Vue는 전역 클릭 함수를 정의하며, 매개변수는 클릭 콜백 함수입니다.

Vue.prototype.globalClick = function (callback) { //页面全局点击
 $(document).click(callback);
}

구성요소가 마운트된 후 전역 클릭 이벤트를 듣습니다.

mounted:function () {
 this.globalClick(this.handleClickOut);
},

요소를 숨깁니다.

dom 노드를 가져와서 닫아야 하는지 결정하기 위해 부모가 존재하는지 확인하세요.

handleClickOut:function (event) {
 if($(event.target).parents(".sys-add-user-dialog").length == 0){
  //隐藏元素
 }
},

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

UglifyJS를 사용하여 node

angularjs에서 JS 파일을 압축하고 병합하는 방법 gulp-uglify 압축

Vue+ElementUI를 사용하여 동적 렌더링 및 시각적 구성을 달성한 후 실행 오류에 대한 솔루션 양식

위 내용은 Vue에서 구성 요소 외부를 클릭하여 구성 요소를 닫는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.