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 環境では常に失敗する

推薦する

DIV と画像の水平および垂直の中央揃えは複数のブラウザと互換性があります

最初のタイプ: 完全な CSS コントロール、レイヤーフローティング (ログインページに適しています...

cmd と python での MySQL の一般的な操作についての簡単な説明

環境設定1: MySQLをインストールし、MySQLのbinディレクトリを環境変数に追加する環境設定...

JDBC を使用して MySQL を操作するための簡単な分析では、Class.forName("com.mysql.jdbc.Driver") を追加する必要があります。

導入データベースに接続するためにJDBCを使用することに慣れている場合は、データベースに接続するため...

Dockerfile を使用して Node.js サービスをデプロイする方法

Dockerfileを初期化するプロジェクトの名前が express であると仮定して、expres...

単一/複数行テキストを含む div を垂直方向に中央揃えする N 通りの方法 (高さ不明/高さ固定)

この問題について話すとき、垂直方向の中央揃えを設定するための vertical-align 属性が ...

VirtualBox は CentOS7 仮想マシンと拡張ツールをインストールします (画像とテキスト)

コンピュータシステム: win7この記事は主に写真に基づいており、多くの写真が含まれていますCent...

DockerにELKをインストールしてJSON形式のログ分析を実装する方法

ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...

Ubuntu 16.04 にソースコードから Mininet をインストールする

ミニネットMininet は軽量のソフトウェア定義ネットワークおよびテスト プラットフォームです。軽...

MySQL データを誤って削除した場合の簡単な解決策 (MySQL フラッシュバック ツール)

概要Binlog2sql は、Python で開発されたオープンソースの MySQL Binlog ...

Web フロントエンドのパフォーマンス最適化の詳細説明: リソースのマージと圧縮

2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...

マウス追従ゲームを実現するjs

この記事では、マウス追従ゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内...

CSS でよく使用されるフォントサイズ、フォント単位、行の高さの詳細な説明

px(ピクセル)ピクセルという言葉は皆さんもよくご存知だと思います。次に、この単位に関するちょっとし...

MySQL テーブルの追加、削除、変更、クエリの基本チュートリアル

1. 作成する [テーブル名] (フィールド1、フィールド2、...) 値 (値1、値2、...) ...

SQL 最適化チュートリアル: IN クエリと RANGE クエリ

序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...

ApacheとTomcatによるクラスタ環境構築プロセスの分析

実際、Apacheクラスタを構築するのは難しくありません。私もインターネットで情報を見つけて自分で設...