<van-button type="primary">主要按鈕</van-button>

<template>
  <main>
    <TheWelcome />
  </main>
</template>
<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue';
</script>

import { showToast } from 'vant';
showToast('提示內(nèi)容');

showToast('服務(wù)器響應(yīng)超時，請刷新當前頁');

<template>
  <!-- 加一點動畫效果 -->
  <transition name="toast" @after-leave="onAfterLeave">
    <div class="toast" v-if="isShow" :style="{ width: toastWidth }">
      <!-- 手動點擊隱藏彈窗 -->
      <div v-if="time < 0" class="cancel" @click="hidden"></div>
      <img
        v-if="type === 'success' || type === 'icon'"
        class="img"
        src="../../assets/images/7vip_web_toast_finish_icon_40x40@2x.png"
        alt="success"
      />
      <img v-if="type === 'warn'" class="img" src="../../assets/images/7vip_web_toast_warn.png" alt="warn" />
      <div v-if="content && type !== 'icon'" class="content" :style="{ textAlign }">{{ content }}</div>
    </div>
  </transition>
</template>
<script setup>
  import { ref, computed } from "vue";
  const props = defineProps({
    //文案內(nèi)容，默認success
    content: {
      type: String,
      default: "success",
    },
    //顯示時間，默認2s，傳小于0的值不自動消失，需要手動關(guān)閉
    time: {
      type: Number,
      default: 2000,
    },
    //寬度，默認310px，這里考慮傳入的寬度可以用字符串也可以用數(shù)值，所以沒有定義類型
    width: {
      default: 310,
    },
    //彈窗文案文本對齊方式，默認center
    textAlign: {
      type: String,
      default: "center",
    },
    //類型,默認圖標（√），傳'warn'顯示（?。瑐髌渌祫t不顯示icon，傳'icon'不顯示文本
    type: {
      type: String,
      default: "success",
    },
    //接收的函數(shù)方法
    hide: {
      type: Function,
      default: () => {},
    },
  });
  // 彈窗顯隱控制
  const isShow = ref(false);
  // 寬度控制，由于設(shè)計稿寬度是750px的寬度，這里通過計算屬性，根據(jù)設(shè)備屏幕寬度自適應(yīng)顯示彈窗的寬度
  const toastWidth = computed(() => (parseInt(props.width.toString()) / 750) * document.documentElement.clientWidth + "px");
  // 顯示彈窗方法
  const show = () => {
    isShow.value = true;
    if (props.time >= 0) {
      setTimeout(() => {
        isShow.value = false;
      }, props.time);
    }
  };
  // 隱藏彈窗方法
  const hidden = () => {
    isShow.value = false;
  };
  // 彈窗關(guān)閉后等動畫結(jié)束再調(diào)用卸載邏輯
  const onAfterLeave = () => {
	props.hide();
  };
  // 將顯示彈窗方法暴露出去
  defineExpose({
    show,
  });
</script>
<style lang="scss" scoped>
  .toast-enter-active,
  .toast-leave-active {
    transition: opacity 0.3s ease-out;
  }
  .toast-enter-from,
  .toast-leave-to {
    opacity: 0;
  }
  .toast {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    background: #333333;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    .cancel {
      background: url("../../assets/images/quxiao@2x.png") no-repeat center / contain;
      position: absolute;
      top: 10px;
      right: 10px;
      width: 40px;
      height: 40px;
      &::before {
        content: "";
        position: absolute;
        top: -10px;
        right: -10px;
        bottom: -10px;
        left: -10px;
      }
    }
    .img {
      width: 80px;
      height: 80px;
    }
    .content {
      margin-top: 20px;
      font-size: 32px;
      color: #ffcc99;
      line-height: 30px;
      text-align: initial;
    }
  }
</style>

import { createApp } from "vue";
import OkToast from "./okToast.vue";
const okToast = options => {
  // 創(chuàng)建元素節(jié)點
  const rootNode = document.createElement("div");
  // 在body標簽內(nèi)部插入此元素
  document.body.appendChild(rootNode);
  // 創(chuàng)建應(yīng)用實例（第一個參數(shù)是根組件。第二個參數(shù)可選，它是要傳遞給根組件的 props）
  const app = createApp(OkToast, {
    ...options,
    hide() {
      // 卸載已掛載的應(yīng)用實例
      app.unmount();
      // 刪除rootNode節(jié)點
      document.body.removeChild(rootNode);
    },
  });
  // 將應(yīng)用實例掛載到創(chuàng)建的 DOM 元素上
  return app.mount(rootNode);
};
// 注冊插件app.use()會自動執(zhí)行install函數(shù)
okToast.install = app => {
  // 注冊全局屬性，類似于 Vue2 的 Vue.prototype
  app.config.globalProperties.$okToast = options => okToast(options).show();
};
// 定義show方法用于直接調(diào)用
okToast.show = options => okToast(options).show();
export default okToast;

// main.js
import okToast from './plugins/okToast/index';

app.use(okToast);

<script setup>
import { getCurrentInstance } from 'vue';
// 獲取當前實例，在當前實例相當于 vue2 中的 this
const { proxy }: any = getCurrentInstance();
// 最簡單的調(diào)用方式，即可出來開頭所展示的效果
proxy.$okToast();
// 傳遞自定義參數(shù)，與okToast.vue文件接收的參數(shù)對應(yīng)
setTimeout(() => {
  proxy.$okToast({
	content: 'Hello World'
  });
}, 2000);
</script>

import $okToast from "./plugs/okToast";

$okToast.show({
  type: "warn",
  content: "Network error,try again later",
});

let rootNode = null;
let app = null;
const okToast = options => {
  const dom = document.body.querySelector('.my-ok-toast');
  if (!dom) {
    rootNode = document.createElement('div');
    // 給創(chuàng)建的元素設(shè)置 class 屬性值
    rootNode.className = `my-ok-toast`;
    document.body.appendChild(rootNode);
  } else {
    // If you want to mount another app on the same host container, you need to unmount the previous app by calling `app.unmount()` first.
    app.unmount();
  }
  app = createApp(OkToast, {
    ...options,
    hide() {
      // 卸載已掛載的應(yīng)用實例
      if (app) {
        app.unmount();
        app = null;
      }
      // 刪除rootNode節(jié)點
      if (rootNode) {
        document.body.removeChild(rootNode);
        rootNode = null;
      }
    }
  });
  return app.mount(rootNode);
};

// 創(chuàng)建臨時變量保存高度值
let top = 0;
const okToast = options => {
  const rootNode = document.createElement('div');
  // 給創(chuàng)建的元素設(shè)置 class 屬性值
  rootNode.className = `my-ok-toast`;
  document.body.appendChild(rootNode);
  const dom = document.body.querySelector('.my-ok-toast');
  // 若DOM中存在該元素則將新元素高度往下移動
  if (dom) {
    top += 120;
    rootNode.style.top = 80 + top + 'px';
  }
  const app = createApp(OkToast, {
    ...options,
    hide() {
      app.unmount();
      document.body.removeChild(rootNode);
    }
  });
  return app.mount(rootNode);
};

.my-ok-toast {
  position: fixed;
  z-index: 99;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
}