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;
    垂直位置合わせ: 中央;
  }
  。文章 {
    垂直位置合わせ: 中央;
  }
}
</スタイル>

// 次のメソッドはプロンプト効果をレンダリングする必要があります 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 // プロトタイプ関数}
}

'@/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' })
      }
    }