Vue でポップアップ ウィンドウをクリックしたときにクリック イベントを自動的にトリガーするソリューション (シミュレーション シナリオ)

Vue でポップアップ ウィンドウをクリックしたときにクリック イベントを自動的にトリガーするソリューション (シミュレーション シナリオ)

ビジネス シナリオ: vue + element ui の el-dialog を使用します。ポップアップ ウィンドウをクリックすると、初期化のために最初のボタンのデータがデフォルトで読み込まれます。

分割

命令:

 // クリックイベントを自動的にトリガーするディレクティブ:{
        トリガー:{
          挿入(el,binging){
            // console.log("イベントを自動的にトリガーする")
            el.クリック()
          }
        }
  },

PS: クリックイベントを自動的にトリガーするvueを見てみましょう

はい、詳細を取得するには左側のリストをクリックしますが、クリック イベントが必要です。ページが表示されると、デフォルトでクリック イベントがトリガーされます。

方法1、vueカスタム命令

  ディレクティブ:{
    トリガー:{
     挿入(el, ビンギング){
        コンソールログ(el.id)
        el.id == 'nav0' ? el.click() : null // 最初のものだけをクリックします。ID はループ内で手動で追加されます // $(el).trigger('click') // すべてが 1 回トリガーされ、その後最後のものがトリガーされます}
    }
  },

使用法:

 <span class="nav-item" :id="'nav' + index" v-trigger :class="{'active': item.stage == activeId}" @click="navClick(item)" v-for="(item, index) in nav" :key="item.stage">{{item.stage_name}}</span>

上記は、Vue のポップアップウィンドウをクリックしてクリックイベントを自動的にトリガーするためのソリューション(シミュレーションシナリオ)の詳細内容です。Vue のクリックイベントを自動的にトリガーする方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vueで自動トリガー機能を実現する方法
  • Vueはクリックイベントを手動で制御します。クリックトリガーメソッド
  • Vue は入力をトリガーしてファイルクリックイベント操作を選択します
  • Vueでクリックイベントをアクティブにトリガーする

<<:  CentOS 7.4 64 ビット版に MySQL 8.0 をインストールして設定するための詳細な手順

>>:  Python ベースの Linux システムにおける特定のプロセスのパフォーマンス監視の考え方の詳細な説明

推薦する

CentOS 7 で Apache (httpd) サービスをインストールおよびアンインストールする詳細な手順

アンインストールまず、次のコマンドを使用して、httpd サービスがインストールされているかどうか、...

JavaScript 関数呼び出し、適用、バインド メソッドのケース スタディ

要約する1. 類似点どちらも、ターゲット関数が実行されると内部の this ポインターを変更できます...

オンラインMySQL自動増分IDが使い果たされた場合の対処方法

目次テーブル定義の自動増分 ID InnoDBシステムはrow_idを自動的に増加させるシドInno...

CentOS7 は yum を使用して mysql 8.0.12 をインストールします

この記事では、centos7にyumを使用してMySQL 8.0.12をインストールする詳細な手順を...

MySQLのビューとインデックスの使い方と違いの詳細な説明

MySQL ビュー簡単に言えば、MySQL ビューは SELECT コマンドを定義するためのショート...

Linuxコマンドunzipの詳しい説明

目次1. 解凍コマンド1.1 構文1.2 オプション2. 例1. 解凍コマンドunzip コマンドは...

Vueはタブナビゲーションバーを実装し、左右のスライド機能をサポートしています

この記事では主に、Vue を使用してタブ ナビゲーション バーを実装し、flex レイアウトを使用し...

Hadoop 2.x と 3.x の 22 ポイントの比較、Hadoop 3.x の 2.x に対する改善点

質問ガイド1. Hadoop 3.x はどのようにして障害を許容するのでしょうか? 2. Hadoo...

VMware、nmap、burpsuite インストール チュートリアル

目次VMware バープスイート1. 仮想マシンイメージとVMwareのインストールと使用2. 仮想...

Linux でリモートから MySQL を自動的にバックアップする方法

序文:基本的に、自社で使用する場合でも、顧客向けにサーバーを展開する場合でも、MySQL のバックア...

JavaScript データ プロキシとイベントの詳細な分析

目次データブローカーとイベントObject.defineProperty メソッドのレビューデータブ...

MySQL レプリケーションの詳細な説明と簡単な例

MySQL レプリケーションの詳細な説明と簡単な例マスタースレーブレプリケーション技術は、MySQL...

Linux コマンドを使用してオーディオ形式を変換および結合する方法

FFmpeg flacをインストールする eric@ray:~$ sudo apt install ...

MySQLのユーザーアカウント管理と権限管理の詳細な説明

序文MySQL の権限テーブルは、データベースの起動時にメモリにロードされます。ユーザーが ID 認...

div 内の img と span の垂直方向の中央揃えの問題について

以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピー<htm...