この記事では、ポップアップボックスコンポーネントメッセージの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 環境では常に失敗する
遅延読み込みを使用しない 'vue' から Vue をインポートします。 '...
2 台のテスト マシンを見つけます。 [root@docker1 centos_zabbix]# d...
MyBatisインターセプターのページング機能を実装する方法序文:まず、実装原則についてお話しします...
この記事では、主要な CSS ウェブサイトで推奨されている 20 個の便利なルールとベスト プラクテ...
1. はじめに今日、同僚から、MySQL を使用して ElasticSearch に似た全文検索機能...
1. CentOS8でのDockerのインストール カール https://download.doc...
目次リアクトファイバーの作成1. 始める前に2. React.renderから始める3. 終了リアク...
仮想マシンの IP アドレスを変更します。 次のインターフェイスに入り、サブネット IP を直接変更...
1. 行の形式は何ですか? MySQL の行形式の設定は次のように表示されます。 実際、MySQL ...
この記事では、ネイティブ JS で実装された複合モーションを紹介します。複合モーションとは、異なる属...
メソッドが定義されているクラスに応じて、現在のクラスへの静的参照を取得するには、self:: または...
この記事の例では、タイムライン再生コンポーネントを実装するためのVUEの具体的なコードを参考までに共...
最近、小さなプログラムを書いています。その小さなプログラムの公式ウェブサイトはhttpsを使用する必...
これからの道のりは長く困難ですが、私は探求を続けます。また週末がやってきました。引き続き、皆さんと一...
この記事では、MySQL 5.7.21の解凍版をダウンロードしてインストールする詳細な手順を記録して...