이제 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){
//隐藏元素
}
},위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
angularjs에서 JS 파일을 압축하고 병합하는 방법 gulp-uglify 압축
Vue+ElementUI를 사용하여 동적 렌더링 및 시각적 구성을 달성한 후 실행 오류에 대한 솔루션 양식
위 내용은 Vue에서 구성 요소 외부를 클릭하여 구성 요소를 닫는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
