Vueでコンポーネントをクリックした後にコンポーネントを閉じる実装方法

今回は、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){
  //隐藏元素
 }
},

この記事のケースを読んだ後は、この方法を習得したと思います。さらにエキサイティングな情報については、その他の情報に注意してください。関連記事はPHP中国語サイトにあります！

推奨読書:

vue.js ラベル属性に変数パラメータを挿入する方法

vue-cli パッケージのコード作成時にプロジェクト関連の設定ファイルを抽出する方法

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