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 はコンポーネント間の通信をどのように実装しますか?

目次1. 父と息子のコミュニケーション1.1 親コンポーネント --> 子コンポーネント1.2...

HTMLはWEB標準の開発の中心的な基盤です

HTML 中心のフロントエンド開発は、ほぼ Web 標準の意味です。共通しているのは「分離」という考...

Nginx で HTTPS 証明書を構成する詳細なプロセス

1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...

CentOS7 での MySQL 8.0.16 のインストールと設定のチュートリアル

MySQLの古いバージョンをアンインストールします(古いバージョンがない場合は、この手順をスキップし...

CSS3で実装された炎のアニメーション

成果を達成する実装コードhtml <div class="コンテナ">...

Echarts バー水平棒グラフのサンプルコード

目次横棒グラフデータとスタイルを動的に更新するeChartsの幅と高さの適応の問題を解決する縦棒グラ...

Tomcat のパフォーマンス最適化方法の簡単な概要

Tomcat自体の最適化Tomcat メモリ最適化起動時に大きなメモリ ブロックが必要であることを ...

Linux でファイアウォールがオフになっているかどうかを確認する方法

1. サービス方法ファイアウォールのステータスを確認します。 [root@centos6 ~]# サ...

div要素に丸い境界線を追加する方法

以下のように表示されます。 CSSコードコンテンツをクリップボードにコピー分割{境界線: 2px 固...

Reactでパスワード強度検出器を実装する方法

目次序文使用コンポーネントの記述データ構造分析プロセス分析基礎コードの分析他の要約する序文パスワード...

Ubuntu 18.04 は mysql 5.7.23 をインストールします

以前、Ubuntu 16.04 に MySQL をスムーズにインストールしました。今回、Ubuntu...

MySQL 8.0.15 のインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

JDKネイティブスレッドプールのバグを修正するTomcatの実装原理

処理能力と同時実行性を向上させるために、Web コンテナは通常、リクエストを処理するタスクをスレッド...

フロントエンドエンジニアが作ったクールなインタラクティブウェブサイトを推薦します

ウェブサイトリンク: http://strml.net/サミュエル・リード著ヒント: 昨日、Mome...

React Hooksの使用例

目次簡単なコンポーネントの例より複雑な親子コンポーネントのケースオンセレクトの書き方反応する子供Re...