Vue3 手動カプセル化ポップアップ ボックス コンポーネント メッセージ メソッド

Vue3 手動カプセル化ポップアップ ボックス コンポーネント メッセージ メソッド

この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

パッケージコンポーネント

<テンプレート>
  <トランジション名="下">
    <div class="xtx-message" :style="style[type]" v-show='isShow'>
      <!-- スタイルは上にバインドされています -->
      <!-- 異なるプロンプトアイコンが変更されます-->
      <i class="iconfont" :class="[style[type].icon]"></i>
      <span class="text">{{text}}</span>
    </div>
  </トランジション>
</テンプレート>
<スクリプト>
'vue' から { onMounted, ref } をインポートします。

エクスポートデフォルト{
  名前: 'XtxMessage',
  小道具: {
    文章: {
      タイプ: 文字列、
      デフォルト: ''
    },
    タイプ: {
      タイプ: 文字列、
      // 警告 警告 エラー エラー 成功 成功 デフォルト: 'warn'
    }
  },
  設定 () {
    // 3つのスタイルを含むオブジェクトを定義します。オブジェクトキーは文字列型です。const style = {
      警告:
        アイコン: 'アイコン警告'、
        色: '#E6A23C',
        背景色: 'rgb(253, 246, 236)',
        境界線の色: 'rgb(250, 236, 216)'
      },
      エラー: {
        アイコン: 'icon-shanchu',
        色: '#F56C6C',
        背景色: 'rgb(254, 240, 240)',
        境界線の色: 'rgb(253, 226, 226)'
      },
      成功: {
        アイコン: 'icon-queren2',
        色: '#67C23A',
        背景色: 'rgb(240, 249, 235)',
        境界線の色: 'rgb(225, 243, 216)'
      }
    }
    // アニメーションを制御する const isShow = ref(false)
    // onMounted をトリガーします(() => {
      isShow.value = true
    })
    { style, isShow } を返します
  }
}
</スクリプト>
<style スコープ lang="less">
。下 {
  &-入力 {
    &-から {
      変換: translate3d(0, -75px, 0);
      不透明度: 0;
    }
    &-アクティブ {
      遷移: すべて 0.5 秒;
    }
    &-に {
      変換: なし;
      不透明度: 1;
    }
  }
}
.xtxメッセージ{
  幅: 300ピクセル;
  高さ: 50px;
  位置: 固定;
  zインデックス: 9999;
  左: 50%;
  左マージン: -150px;
  上: 25px;
  行の高さ: 50px;
  パディング: 0 25px;
  境界線: 1px 実線 #e4e4e4;
  背景: #f5f5f5;
  色: #999;
  境界線の半径: 4px;
  私 {
    右マージン: 4px;
    垂直位置合わせ: 中央;
  }
  。文章 {
    垂直位置合わせ: 中央;
  }
}
</スタイル>

Vueのプロトタイプオブジェクトにマウント

// 次のメソッドはプロンプト効果をレンダリングする必要があります import { createVNode, render } from 'vue'
'./xtx-message.vue' から XtxMessage をインポートします。

// DOM コンテナを動的に作成する const div = document.createElement('div')
div.setAttribute('クラス', 'xtxメッセージコンテナ')
ドキュメント本体に子要素を追加します。

エクスポート デフォルト ({ テキスト、タイプ }) => {
  タイマーを null にする
  // createVNode は仮想ノードを作成するために使用されます // パラメータ 1 はコンポーネントをサポートします // パラメータ 2 はコンポーネントに渡されるオプションを表します const vnode = createVNode(XtxMessage, { text, type })
  // 仮想ノードをページの DOM にレンダリングします // レンダリング関数のパラメータ // パラメータ 1: レンダリングするコンテンツ (仮想ノード) を示します
  // パラメータ 2: レンダリングのターゲット位置 (DOM 要素) を示します
  レンダリング(vnode, div)

  // プロンプトメッセージが1秒後に消えることを期待する clearTimeout(timer)
  タイマー = setTimeout(() => {
    // div の内容をクリアします render(null, div)
  }, 1000)
}

// $message({ text: 'ログインに失敗しました', type: 'error'})
'./Message' からメッセージをインポートします
エクスポートデフォルト{
  インストール(アプリ) {
    // グローバルプロパティをマウントしたい場合は、コンポーネントインスタンスを通じてプロパティ this.$message を呼び出すことができます。
    app.config.globalProperties.$message = Message // プロトタイプ関数}
}

使用

1つ。

'@/components/library/Message' からメッセージをインポートします。
設定 () {
    // ログインをトリガーする const handleLogin = async () => {
      // 手動フォーム検証 const flag = await target.value.validate()
      if (フラグ) {
        // 検証に合格したら、ログインするためのインターフェースを呼び出します // ログインに失敗した場合は、Message({ type: 'error', text: 'ログインに失敗しました' }) を表示します
      }
    }
    マウントされた(){
      this.$message({ type: 'error', text: 'ログインに失敗しました' })
    }
}

二。

// コンポーネントのインスタンスオブジェクトを取得します。前の this と同様です
    定数インスタンス = getCurrentInstance()
     // クリックしてログイン const handleLogin = async () => {
      const 有効 = ターゲット.値.検証() を待機します
      (有効)の場合{
        // フォーム検証に合格しました。ログインするためのインターフェースを呼び出します // Message({ text: 'ログインに失敗しました', type: 'error' })
        instance.proxy.$message({ text: 'ログインに失敗しました', type: 'error' })
      }
    }

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3カプセル化メッセージメッセージプロンプトインスタンス関数の詳細な説明
  • Vue3 はメッセージコンポーネントの例を実装します
  • vue をベースにしたグローバルメッセージコンポーネントを作成する
  • Vue での el-message のカプセル化と使用

<<:  SQLは、隣接する2行のデータに対して加算、減算、乗算、除算の演算を実行します。

>>:  Excel エクスポートは docker 環境では常に失敗する

推薦する

vue-router を遅延ロードする 3 つの方法のまとめ

遅延読み込みを使用しない 'vue' から Vue をインポートします。 '...

Dockerはmacvlanをベースにホスト間コンテナ通信を実装する

2 台のテスト マシンを見つけます。 [root@docker1 centos_zabbix]# d...

MyBatisインターセプターのページング機能を実装する方法

MyBatisインターセプターのページング機能を実装する方法序文:まず、実装原則についてお話しします...

効率化に役立つ 20 の CSS コーディングのヒント (並べ替え)

この記事では、主要な CSS ウェブサイトで推奨されている 20 個の便利なルールとベスト プラクテ...

全文検索とキーワードスコアリング方式のMySQL実装例

1. はじめに今日、同僚から、MySQL を使用して ElasticSearch に似た全文検索機能...

CentOS8でのDockerの使い方の詳しい説明

1. CentOS8でのDockerのインストール カール https://download.doc...

React Fiber構造の作成手順

目次リアクトファイバーの作成1. 始める前に2. React.renderから始める3. 終了リアク...

Linux 仮想マシンの IP アドレスを変更し、ゲートウェイを確認し、ネットワーク環境を構成する方法に関するチュートリアル

仮想マシンの IP アドレスを変更します。 次のインターフェイスに入り、サブネット IP を直接変更...

MySQLデータ行と行オーバーフローのメカニズムの詳細な説明

1. 行の形式は何ですか? MySQL の行形式の設定は次のように表示されます。 実際、MySQL ...

ネイティブJSで様々なモーションの複合モーションを実現

この記事では、ネイティブ JS で実装された複合モーションを紹介します。複合モーションとは、異なる属...

PHP クラスにおける static と self の違いの簡単な分析

メソッドが定義されているクラスに応じて、現在のクラスへの静的参照を取得するには、self:: または...

VUEはタイムライン再生コンポーネントを実装します

この記事の例では、タイムライン再生コンポーネントを実装するためのVUEの具体的なコードを参考までに共...

nginx を使用して http を https に変換するサンプルコード

最近、小さなプログラムを書いています。その小さなプログラムの公式ウェブサイトはhttpsを使用する必...

MySql におけるプロセス制御関数/統計関数/グループ化クエリの使用法の分析

これからの道のりは長く困難ですが、私は探求を続けます。また週末がやってきました。引き続き、皆さんと一...

MySQL 5.7.21 解凍バージョンのインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.21の解凍版をダウンロードしてインストールする詳細な手順を記録して...