この記事では、ポップアップボックスコンポーネントメッセージの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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: SQLは、隣接する2行のデータに対して加算、減算、乗算、除算の演算を実行します。
>>: Excel エクスポートは docker 環境では常に失敗する
最初のタイプ: 完全な CSS コントロール、レイヤーフローティング (ログインページに適しています...
環境設定1: MySQLをインストールし、MySQLのbinディレクトリを環境変数に追加する環境設定...
導入データベースに接続するためにJDBCを使用することに慣れている場合は、データベースに接続するため...
Dockerfileを初期化するプロジェクトの名前が express であると仮定して、expres...
この問題について話すとき、垂直方向の中央揃えを設定するための vertical-align 属性が ...
コンピュータシステム: win7この記事は主に写真に基づいており、多くの写真が含まれていますCent...
ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...
ミニネットMininet は軽量のソフトウェア定義ネットワークおよびテスト プラットフォームです。軽...
概要Binlog2sql は、Python で開発されたオープンソースの MySQL Binlog ...
2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...
この記事では、マウス追従ゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内...
px(ピクセル)ピクセルという言葉は皆さんもよくご存知だと思います。次に、この単位に関するちょっとし...
1. 作成する [テーブル名] (フィールド1、フィールド2、...) 値 (値1、値2、...) ...
序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...
実際、Apacheクラスタを構築するのは難しくありません。私もインターネットで情報を見つけて自分で設...