Vue3 はメッセージコンポーネントの例を実装します

// メッセージ タイプ: テキスト、成功、失敗 ["text", "success", "error"]

// メッセージオプション
[文字列]: メッセージの内容 [オブジェクト]: メッセージの構成 // オプションの構成テキスト [文字列] "" メッセージの内容の継続時間 [数値] 0 自動終了の遅延時間 (ミリ秒単位)。0 は自動終了しないことを意味します。close [ブール値] false 閉じるボタンを表示するかどうか // メソッドの呼び出し Message[type](option);

Message.text("これはメッセージプロンプトです");
メッセージ.error({
    テキスト:「ネットワークエラーです。しばらくしてからもう一度お試しください」
    期間: 3000、
    閉じる: 真
});

|--- メッセージ
 |--- ソース
 | |--- Message.vue // コンポーネント テンプレート| |--- Message.less // コンポーネント スタイル サポートを提供| |--- Message.js // 構成を読み取り、コンポーネント インスタンスをレンダリング| |--- Instance.js // コンポーネント インスタンス|---index.js // コンポーネントを公開

<テンプレート>
  <!-- メッセージリスト-->
  <トランジション名="スライドフェード">
    <div class="メッセージコンテナ" v-show="表示">
      <!-- 目次 -->
      <div class="メッセージコンテンツ">

        <!-- メッセージ タイプのアイコンはメッセージ タイプによって決定され、テキスト タイプではアイコンは構成されません -->
        <div class="message-icon" v-if="config.icon">
          <i :class="config.icon"></i>
        </div>

  <!-- メッセージテキスト -->
        <span v-text="config.content"></span>

        <!-- メッセージを手動で閉じます -->
        <div class="option" v-if="!config.close">
          <i class="ri-close-fill" @click="onClose"></i>
        </div>

      </div>
    </div>
  </トランジション>
</テンプレート>

@半径: 4px;
@通常の高さ: 34px;

。メッセージ {
  位置: 固定;
  上: 0;
  左: 0;
  幅: 100%;
  テキスト配置: 中央;
  ボックスのサイズ: 境界線ボックス;
  zインデックス: 9999;
  変換: translateZ(9999px);
  パディング上部: 28px;
  遷移: トップ 0.4 秒の緩和;

  .メッセージコンテナ{
    下部マージン: 14px;

    .メッセージアイコン{
      表示: インラインブロック;

      私 {
        フォントサイズ: 18px;
        フォントの太さ: 400;
        上マージン: -3px;
        右マージン: 6px;
        表示: インラインブロック;
        ボックスのサイズ: 境界線ボックス;
        垂直位置合わせ: 中央;
      }

      .ri-チェックボックス-円-塗りつぶし {
        色: #58c05b;
      }

      .ri-close-circle-fill {
        色: #fd4f4d;
      }

    .メッセージコンテンツ{
      表示: インラインブロック;
      パディング: 4px 18px;
      高さ: @normalHeight;
      テキスト配置: 左;
      行の高さ: @normalHeight;
      フォントサイズ: 14px;
      フォントの太さ: 400;
      境界の半径: @radius;
      色: #595959;
      ボックスの影: 0 4px 12px rgba(0, 0, 0, .15);
      背景: #ffffff;

      。オプション {
        表示: インラインブロック;
        ポインタイベント: すべて;
        左マージン: 18px;

        私 {
          フォントサイズ: 18px;
          フォントの太さ: 400;
          上マージン: -3px;
          表示: インラインブロック;
          ボックスのサイズ: 境界線ボックス;
          垂直位置合わせ: 中央;
          カーソル: ポインタ;
          色: #d9d9d9;
          遷移: 色 0.2 秒の緩和;

          &:ホバー{
            色: #ff7c75;
            遷移: 色 0.2 秒の緩和;
          }
        }
      }
    }
  }

  .スライドフェードエンターアクティブ{
    遷移: すべて .2 秒のイーズアウト。
  }

  .スライドフェードアクティブのままにする {
    遷移: すべて .2 秒の緩和;
  }

  .スライドフェードエンターから、
  .スライドフェードアウト{
    変換: translateY(-20px);
    不透明度: 0;
  }
}

<スクリプト>
「vue」から reactive, toRefs をインポートします。
エクスポートデフォルト{
  小道具: {
    config: { type: Object, default: () => {} }, // メッセージ構成項目 remove: { type: Function, default: () => {} }, // マウントコールバックをキャンセル },
  セットアップ(プロパティ) {
    定数状態 = リアクティブ({
      表示: false、
    })

    // メッセージを開く const onOpen = (config) => {
      タイムアウトを設定する(() => {
        状態.visible = true;
      }, 10)

      // 指定された時間後にメッセージを削除します if (config.duration !== 0) {
        タイムアウトを設定する(() => {
          閉じる
        }, config.duration);
      }
    }

    開く(props.config)

    //メッセージを閉じる const onClose = () => {
      状態.visible = false;
      タイムアウトを設定する(() => {
        props.remove()
      }, 200)
    };

    戻る {
      ...toRefs(状態)、
      オープン時、
      閉じる時、
    };
  },
};
</スクリプト>

'vue' から {createApp} をインポートします。
'./Message.vue' からメッセージをインポートします。

/**
 * メッセージインスタンス操作 * @param {Object} cfg インスタンス構成 */
const createInstance = cfg => {
 定数config = cfg || {}
 // 1. パッケージ コンテナを作成し、外側の Class 属性とメッセージ数を設定します // 2. インスタンスを作成し、それを本体にマウントします
 
 // 3. マウントをキャンセルし、マウントをキャンセルした後にカウントを再開するメソッドを実装します}
デフォルトのcreateInstanceをエクスポートする

messageNode = document.createElement('div') とします。
attr = document.createAttribute("class") とします。
attr.value = "メッセージ"
messageNode.setAttributeNode(属性)

const height = 54 // 単一メッセージボックスの高さ const messageList = document.getElementsByClassName('message')
messageNode.style.top = `${messageList.length * height}px`

const app = createApp(メッセージ、{
  設定、
  取り除く（） {
    handleRemove()// 要素を削除します。メッセージが閉じられた後、アンマウントして Dom から削除します。}
})

// インスタンスをマウントし、本文の末尾に追加します。app.vm = app.mount(messageNode)
document.body.appendChild(メッセージノード)

アプリを閉じる = () => {
  ハンドル削除()
}

返品アプリ

const ハンドル削除 = ()=>{
  app.unmount(メッセージノード)
  document.body.removeChild(メッセージノード)
  リセットメッセージトップ()
 }

const resetMsgTop = () => {
  (i = 0 とします; i < messageList.length; i++) {
    messageList[i].style.top = `${i * height}px`
  }
}

'./Instance.js' から createInstance をインポートします。

/**
 * 設定を読み取り、メッセージをレンダリングする
 * @param {Object} typeCfg タイプ設定 * @param {Object/String} cfg カスタム設定 */
関数 renderMsg(typeCfg = {}, cfg = '') {
  // メッセージ コンテンツを直接渡すことができるため、渡される cfg のタイプを決定する必要があります。const isContent = typeof cfg === 'string'

  // カスタム構成を統合します cfg = isContent ? {
    コンテンツ: cfg
  } : cfg

  const config = Object.assign({}, typeCfg, cfg) // 構成をマージする const {
    type = 'text', // メッセージタイプ content = '', // メッセージコンテンツduration = 3000, // 自動終了遅延時間 close = false // 閉じるボタンを表示するかどうか } = config

  // インスタンスを作成する return createInstance({
    タイプ、
    コンテンツ、
    間隔、
    近い
  })
}

エクスポートデフォルト{
  // プレーンテキストメッセージ text(cfg = "") {
    定数textCfg = {
      タイプ: "テキスト",
      アイコン: ''
    }

    renderMsg(textCfg, cfg) を返します。
  },
  // 成功プロンプト success(cfg = "") {
    定数成功構成 = {
      タイプ: "成功",
      アイコン: 'ri-checkbox-circle-fill'
    }

    renderMsg(successCfg, cfg) を返します。
  },
  // エラーメッセージ error(cfg = "") {
    定数エラー構成 = {
      タイプ: "エラー",
      アイコン: 'ri-close-circle-fill'
    }

    renderMsg(errorCfg, cfg) を返します。
  },
}

'./src/Message.js' からメッセージをインポートします。

デフォルトメッセージをエクスポートします。