Vueはダイアログのカプセル化を実装します

Vueはダイアログのカプセル化を実装します

ビジネスを書くときによくあるシナリオは、異なるページで同じフォームを呼び出す必要があることです。一般的なインタラクションは、ポップアップウィンドウの形式でフォームを表示することですが、各ページでフォームコンポーネントを繰り返し導入するのは面倒な場合があります。

解決策は2つあります。

  1. ルートコンポーネントに動的コンポーネントを導入し、ビジネスでthis.$root.openDialog(name, props)を通じて動的コンポーネントの表示形式を制御する
  2. これをプラグインにカプセル化して呼び出します。例: this.$dialog('EditDialog.vue', props)

もちろん、ビジネス Dialog コンポーネントには一連の仕様が必要です。Props は onOk および onCancel コールバックを受け取り、データ内に表示プロパティを定義します。

<テンプレート>
  <el-dialog :title="タイトル" :visible.sync="表示可能" 本文に追加>
    <!-- ビジネスコード -->
  </el-ダイアログ>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  props: ['onOk', 'ビジネスに必要なその他のプロパティ'],
  データ() {
    戻る {
      表示: 偽
    }
  }
}
</スクリプト>

Vue2 ライティング

Vue2ではプラグインとして書いた方が個人的には楽だと感じています。実装は以下のとおりです。一部の操作はミックスインを使用して業務から切り離しています。

欠点は、コンポーネントが動的に挿入され、コンポーネントを表示するには Vue devtools を更新する必要があることです。

const ミックスイン = {
  マウント() {
    document.body.appendChild(this.$el)
    this.visible = true
  },
  時計:
    表示(値) {
      // アニメーション終了後にインスタンスを破棄する if (value === false) {
        タイムアウトを設定する(() => {
          これを破棄します。
          if (this.$el && this.$el.parentNode) {
            this.$el.parentNode.removeChild(this.$el)
          }
        }, 400)
      }
    }
  }
}

エクスポートデフォルト{
  インストール(Vue, オプション) {
    Vue.prototype.$dialog = (名前、プロパティ) => {
      // プラグインの場所を基準に、静的コンパイル時に import('../components/dialogs/' + name) がチェックされます
        .then(モジュール => {
          const コンポーネント = module.default
          const ミックスイン = コンポーネント.ミックスイン || []
          mixins.push(mixin) // 自動的に開き、ライフサイクル関数と破棄操作を動的にミックスインします。component.mixins = mixins
          Vue.extend(コンポーネント) を返します
        })
        .then(ダイアログ => {
          const ダイアログ = 新しいダイアログ({
            propsData: props || {}
          })
          ダイアログ.$mount()
        })
    }
  }
}

呼び出し方法は次のとおりです。矢印関数を使用すると、onOk コールバックの this ポインターを回避できることに注意してください。

this.$dialog('GroupEdit.vue', {
  タイプ: '編集'、
  グループ: {}、
  オンOK: () => {
    this.freshList()
  }
})

Vue3プラグインのバージョンの記述

残念ながら、Vue3 のアップグレードにより、Vue.extend と $mount がなくなり、コンポーネントはアプリケーション内でのみレンダリングできるようになりました。

各アプリケーション間のデータは分離されているため、プラグインなどを再度導入する必要があります。同時に、やりとりをしたい場合も面倒です。同じ vuex インスタンスを導入すればできるはずですが、試していません。

結合を減らすために、レンダリングをマウントするための新しいアプリケーションのみを作成することができます

'vue' から {createApp、defineComponent} をインポートします。
'element-plus' から ElementPlus をインポートします

const ミックスイン = {
  マウント() {
    document.body.appendChild(this.$el)
    this.visible = true
  },
  時計:
    表示(値) {
      // アニメーション終了後にインスタンスを破棄する if (value === false) {
        タイムアウトを設定する(() => {
          this.$.appContext.app.unmount()
        }, 400)
      }
    }
  }
}

エクスポートデフォルト{
  インストール(アプリ) {
    app.config.globalProperties.$dialog = (名前、プロパティ) => {
      インポート('../components/dialogs/' + 名前)
        .then(モジュール => {
          const コンポーネント = module.default
          mixins = component.mixins || [] とします。
          mixins.push(ミックスイン)
          コンポーネント.mixins = ミックスイン

          defineComponent(コンポーネント) を返します
        })
        .then(ダイアログ => {
          const app = createApp(ダイアログ、props || {})
          app.use(ElementPlus)
          app.mount(document.createElement('div'))
        })
    }
  }
}

Vue3 動的コンポーネントの記述

Vue3ではプラグイン版も要件を満たしていますが、完全に新規アプリケーションです。これにアクセスするのはまだ少し面倒です。業務では$root、vuex、routerを使用します。

したがって、Vue3 では動的コンポーネントの方が優れています。

ルートコンポーネントに動的コンポーネントを導入し、いくつかの制御変数を定義する

<テンプレート>
  <ルータービュー></ルータービュー>
  <component :is="currentDialog" v-bind="currentDialogProps" />
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
      現在のダイアログ: null、
      現在のダイアログプロパティ: null
    }
  }
}
</スクリプト>

this.$root.$dialog() を呼び出すと、見た目が醜くなります。実際には、プラグインの効果を手動でシミュレートすることもできます。

const app = createApp(App)
定数 vm = app.mount('#app')

initDialog(アプリ、vm)

関数 initDialog(app, vm) {
  const ミックスイン = {
    マウント() {
      this.visible = true
    },
    時計:
      表示(値) {
        // アニメーション終了後にインスタンスを破棄する if (value === false) {
          タイムアウトを設定する(() => {
            this.$root.currentDialog = null
            this.$root.currentDialogProps = {}
          }, 400)
        }
      }
    }
  }

  app.config.globalProperties.$dialog = (名前、プロパティ) => {
    import('./components/dialogs/' + name).then(module => {
      const コンポーネント = module.default
      mixins = component.mixins || [] とします。
      mixins.push(ミックスイン)
      コンポーネント.mixins = ミックスイン
      // defineComponent(component) は必要ありません
      vm.currentDialog = markRaw(コンポーネント)
      vm.currentDialogProps = markRaw(props || {})
    })
  }
}

ちょっとしたハックな書き方

Vue3コンポーネントインスタンスはアプリケーションインスタンスを取得します

vm.$.appContext.app == アプリ

Vue3 アプリケーション インスタンスはコンポーネント インスタンスを取得します。_instance は開発環境でのみアクセスできることに注意してください。

app._instance.proxy == vm
app._instance.root.proxy == vm
app._instance.ctx.$root == vm

まだいくつかのトリックがありますが、使用しない方がよいでしょう。

const app = createApp(App)
定数 vm = app.mount('#app')

process.env.NODE_ENV === 'production'の場合{
  アプリ._インスタンス = {
    プロキシ: vm、
    根: {
      プロキシ: vm
    },
    ctx: {
      $ルート:vm
    }
  }
}

Vue のダイアログ カプセル化の実装に関するこの記事はこれで終わりです。Vue ダイアログ カプセル化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue+element-ui プロジェクトでダイアログ コンポーネントをカプセル化する方法の詳細な説明
  • より使いやすいダイアログコンポーネントをカプセル化するプロセスの詳細な説明

<<:  Linuxファイルシステム操作の実装

>>:  MySQL エラー: 接続数が多すぎる場合の解決策

推薦する

ubuntu14.04 に jdk1.8 をインストールするチュートリアル

1. jdkダウンロードアドレスをダウンロードする我下載的是jdk-8u221-linux-x64....

CSS3で実装された6つの境界遷移効果

6つの効果実装コードhtml <h1>CSS 境界遷移</h1> <セ...

一般的な XHTML タグの紹介

<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...

TypeScript の条件型に関する詳細な読書と実践記録

目次ジェネリック型での条件型の使用ツールタイプ脱出ポッド矢印関数で条件型を使用する型推論による条件型...

HTML Webページ作成チュートリアル iframeタグを慎重に使用してください

iframe を使用すると、他の Web サイトのページを簡単に呼び出すことができますが、注意して使...

MySQL 主キー ID を生成する方法 (自己増分、一意、不規則)

目次1. uuid関数を使用して、一意かつ不規則な主キーIDを生成します。 2. idの自動成長1....

大きな MySQL テーブルに列を追加する方法

質問は https://www.zhihu.com/question/440231149 から参照さ...

TeamCenter12 にログインする際の 404/503 問題の解決方法

TeamCenter12はアカウントのパスワードを入力し、ログインをクリックすると、404または50...

HTML_PowerNode 入門 Java アカデミー

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 HTML ...

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

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

JavaScriptの擬似配列と配列の使い方と違い

擬似配列と配列JavaScript では、5 つのプリミティブ データ型を除き、関数を含め、その他す...

MySQL 8.0.17 をインストールしてリモート アクセスを構成する方法

1. インストール前の準備データベースのバージョンを確認するコマンド: mysql --versio...

Linux でソースインストールされたパッケージを簡単に削除する方法

ステップ1: Stowをインストールするこの例では CentOS を使用しているため、拡張 EPEL...

一般的な JavaScript 文字列メソッド 28 個と使用方法のヒントのまとめ

目次序文1. 文字列の長さを取得する2. 文字列の指定された位置の値を取得する(1) charAt(...

Linux の daily_routine サンプルコードの詳細な説明

まずサンプルコードを見てみましょう: #/bin/bash cal 日付 -u echo "...