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

推薦する

Vue要素ヘッダーにスラッシュを追加するための実装コード

<テンプレート> <div class="アプリコンテナ"&...

MySQL でシンプルな検索エンジンを実装するためのサンプルコード

目次序文導入ngram全文パーサー全文インデックスを作成する検索方法1. 自然言語検索(自然言語モー...

HTML テーブルに複雑なテーブル ヘッダーを実装するためのサンプル コード

複雑な表を作成するには HTML を使用します。複雑なテーブルでは通常、td の rowspan 属...

Vueはテーマ切り替えのための複数のアイデアを実装します

目次テーマを動的に変更する最初の方法: 動的コンポーネント2番目の方法はルーティング分離です要約する...

Vue を通じて QR コードスキャン機能を実装する

ヒントこのプラグインは https プロトコルでのみアクセスできます。http プロトコルはうまく機...

CSS3 タイムラインアニメーション

成果を達成する html <h2>CSS3 タイムライン</h2> <...

Linux で AutoFs マウント サービスをインストールするチュートリアル

Samba サービスでも NFS サービスでも、サーバーの起動時にリモート共有リソースが自動的にマ...

ローカル画像サーバーのNginx構成の実装

目次1. Nginx の紹介2. 画像サーバーの構築1. Nginx の紹介Nginx はリバース ...

MySQLで日付と時刻を照会する方法

序文:プロジェクト開発では、一部のビジネス テーブル フィールドで日付と時刻の型が使用されることが多...

Nginx リバース プロキシでセッション永続性を実装する 2 つの方法の詳細な説明

1. ip_hash: ip_hash は、送信元アドレス ハッシュ アルゴリズムを使用して、サーバ...

Linux パーティションまたは論理ボリュームにファイルシステムを作成する方法

序文システムにファイル システムを作成し、それを永続的または非永続的にマウントする方法を学習します。...

MySQL Binlog ログ処理ツールの比較分析

目次運河マクスウェルデータバスAlibaba Cloud のデータ転送サービス (DTS)運河ポジシ...

MySQL ステートメントに一重引用符またはバックスラッシュを含む値を挿入する方法

序文この記事では主に、シングルクォートやバックスラッシュを含む値を挿入するMySQLステートメントに...

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

インターネット上には Linux サーバーを監視するためのツール、コンポーネント、プログラムが多数あ...

Vue3+Vite+TS は、要素プラスビジネスコンポーネントの二次カプセル化を実装します sfasga

目次1. 構造文字列2. タプルを返す3. Dict辞書にアクセスする4. 図書館を利用する5. リ...