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を使用してノードの下のJSファイルを圧縮してマージする方法

angularjs gulp-uglify圧縮を使用した後の実行エラーの解決策

Vue+ElementUIを使用して動的なレンダリングと視覚的構成を実現フォーム

以上がVueでコンポーネントの外側をクリックしてコンポーネントを閉じる方法について（詳細チュートリアル）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。