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

推薦する

Dockerはホスト間のネットワーク通信を実現するためにMacvlanを導入する

基本的な概念: Macvlanの動作原理: Macvlan は、Linux カーネルでサポートされて...

Alibaba Cloud で静的ウェブサイトを素早く構築する方法

序文:ジュニアプログラマーとして、私は自分自身の個人ウェブサイトを構築し、それを他の人に見せることを...

LinuxにComposerをインストールする方法

1. インストールスクリプト(composer-setup.php)を現在のディレクトリにダウンロー...

Reactコンポーネント通信の詳細な説明

目次コンポーネント通信の概要コンテンツ3つの方法まとめコンポーネントコミュニケーション - 父から息...

Nginx 設定場所のマッチング優先順位の簡単な分析

序文Nginx 構成のサーバー ブロック内の場所は、リクエスト URI を一致させるために使用され、...

モバイルアダプティブスタイルで@mediaを使用する方法

一般的な携帯電話のスタイル: @media all および (orientation : 縦向き) ...

CSS3 カテゴリメニュー効果

CSS3 カテゴリ メニューの効果は次のとおりです。 html <html> <ヘ...

MySQL スケジュール データベース バックアップ (フル データベース バックアップ) の実装

目次1. MySQLデータのバックアップ1.1. データをバックアップするためのmysqldumpコ...

Docker データ管理 (データ ボリュームとデータ ボリューム コンテナー) の詳細な説明

実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共有す...

ウェブページ制作でウェブフォントファイルにベクターアイコンを追加する方法

ご存知のとおり、コンピューターには 2 種類の画像があり、1 つはビットマップ、もう 1 つはベクタ...

MySQLでグローバル変数とセッション変数を設定する2つの方法の詳細な説明

1. MySQL でグローバル変数を変更するには 2 つの方法があります。方法 1: my.ini ...

vscodeでnpmを使用してbabelをインストールする方法

序文前回の記事ではNode.jsのインストールと設定を紹介しました。今回はVScodeでbableを...

MySQL における explain の役割の詳細な説明

1. MYSQLインデックスインデックス: MySQL がデータを効率的に取得するのに役立つデータ構...

CSS3 レーダースキャンマップのサンプルコード

CSS3 を使用して、クールなレーダースキャン画像を実現します。 コード上で直接: // インデック...

JavaScript の parseInt() の魔法についての簡単な説明

原因このブログを書いた理由は、今日Leetcodeの日課問題をやっていたからです。文字列を整数(at...