ここで、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を使用してノードの下のJSファイルを圧縮してマージする方法
angularjs gulp-uglify圧縮を使用した後の実行エラーの解決策
Vue+ElementUIを使用して動的なレンダリングと視覚的構成を実現フォーム
以上がVueでコンポーネントの外側をクリックしてコンポーネントを閉じる方法について（詳細チュートリアル）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
