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 システムにおける特定のプロセスのパフォーマンス監視の考え方の詳細な説明

推薦する

MySQL5.6.31 winx64.zip インストールと設定のチュートリアル

#1. ダウンロード # #2. ローカルに解凍し、必要な構成のmy*.iniを変更します。 #3....

JavaScript における Promise の詳細な説明

目次Promise の基本的な使用法: 1. Promiseオブジェクトを作成する2. プロミス方式...

WebpackはCSSファイルを読み込み、その設定方法

webpackはCSSファイルとその設定をロードします複数の CSS ファイルを作成した後、HTML...

JavaScript で動的な QML オブジェクトを作成する方法

1. オブジェクトを動的に作成するJavaScript からオブジェクトを動的に作成する方法は 2 ...

Linux/Docker で System.Drawing.Common を使用する

序文プロジェクトを .net core に移行した後、 System.Drawing.Commonコ...

Docker ベースの Redis クラスターの構築方法

Redisイメージをダウンロードする docker pull yyyyttttwww/redis を...

Docker を使用してフロントエンド アプリケーションをデプロイする方法

Dockerはますます普及しています。環境を軽量かつ柔軟に分離し、容量を拡張し、運用保守管理を容易に...

MySQL のロックの仕組みと使用法の分析

この記事では、例を使用して MySQL のロック メカニズムと使用方法を説明します。ご参考までに、詳...

一意の注文番号を生成するためのMySQLの高同時実行方法

序文このブログ記事が公開された後、何人かの友人からSQL Serverバージョンがあるかどうか尋ねら...

DIV の一般的なタスク (パート 1) — 一般的なタスク (スクロール バーの表示、div の非表示、イベント バブリングの無効化など)

最も一般的に使用されるレイアウト要素として、DIV は Web 開発において重要な役割を果たします。...

Nginx http ヘルスチェック構成プロセス分析

パッシブチェックパッシブ ヘルス チェックでは、NGINX と NGINX Plus はイベントの発...

SpringBootをDockerにデプロイし、jarパッケージを置き換える方法の詳細な説明

目次プロジェクトディレクトリDockerファイルファイルの展開画像を生成するコンテナを起動するウェブ...

MySQL 実践演習 シンプルなライブラリ管理システム

目次1. ソート機能2. データベースを準備する3. データベースに関連するエンティティクラスの構築...

MySQL マルチインスタンス構成のアプリケーションシナリオ

目次MySQL 複数インスタンスマルチインスタンスの概要マルチインスタンスとは何ですか?複数のインス...