Vue3カプセル化メッセージメッセージプロンプトインスタンス関数の詳細な説明

<テンプレート>
  <トランジション名="下">
    <div class="my-message" :style="style[type]" v-show='isShow'>
      <!-- スタイルは上にバインドされています -->
      <!-- 異なるプロンプトアイコンが変更されます-->
      <i class="iconfont" :class="[style[type].icon]"></i>
      <span class="text">{{text}}</span>
    </div>
  </トランジション>
</テンプレート>
<スクリプト>
'vue' から { onMounted, ref } をインポートします。
エクスポートデフォルト{
  名前: 'myMessage',
  小道具: {
    文章： {
      タイプ: 文字列、
      デフォルト： ''
    },
    タイプ： {
      タイプ: 文字列、
      // 警告 警告 エラー エラー 成功 成功 デフォルト: '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;
    }
  }
}
.私のメッセージ{
  幅: 300ピクセル;
  高さ: 50px;
  位置: 固定;
  zインデックス: 9999;
  左: 50%;
  左マージン: -150px;
  上: 25px;
  行の高さ: 50px;
  パディング: 0 25px;
  境界線: 1px 実線 #e4e4e4;
  背景: #f5f5f5;
  色: #999;
  境界線の半径: 4px;
  私 {
    右マージン: 4px;
    垂直位置合わせ: 中央;
  }
  。文章 {
    垂直位置合わせ: 中央;
  }
}
</スタイル>

//icon//textimport { createVNode,render } を 'vue' からインポートします
'./message.vue' から myMessage をインポートします。
// DOM コンテナを動的に作成する const div = document.createElement('div')
div.setAttribute('クラス','私のメッセージコンテナ')
ドキュメント本体に子要素を追加します。
エクスポートデフォルト ({テキスト、タイプ})=>{
  タイマーを null にする
  //createVNode は仮想ノードを作成するために使用されます // パラメーター 1 はコンポーネントをサポートします // パラメーター 2 はコンポーネントに渡されるオプションを表します const vnode = createVNode(myMessage,{text, type})
// 仮想ノードをページの DOM にレンダリングします // レンダリング関数のパラメータ // パラメータ 1: レンダリングするコンテンツ (仮想ノード) を示します
// パラメータ 2: レンダリングのターゲット位置 (DOM 要素) を示します
   レンダリング(vnode,div)
 // 1秒後に消えることを期待する clearTimeout(timer)
   タイマー = setTimeout(()=>{
     // div の内容をクリアします render(null,div)
   },1000)
}
// $message({ text: 'ログインに失敗しました', type: 'error'})

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

'./message.js' からメッセージをインポートします。
設定（）{
  メッセージ({ テキスト: 'ログインに失敗しました'、タイプ: 'エラー' })
}

// セットアップ関数でコンポーネントインスタンスオブジェクトにアクセスします。import { getCurrentInstance } from 'vue'
   設定（）{
     定数インスタンス = getCurrentInstance()
     instance.proxy.$message({ text: 'ログインに失敗しました', type: 'error' })
   } 

this.$message({ text: 'ログインに失敗しました', type: 'error' })