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

이제 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!