vue3.x全局toast、message、loading組件

• • Toast組件
  • loading

Toast組件

• 在 src/components下創建toast文件夾，并依此創建index.vue和index.js

1、index.vue
一般toast會有如下功能：背景色、字體顏色、文本、停留時間

<template> <div class="toast-box" ><p class="toast-value" :style="{background: background, color: color}">{{ value }}</p> </div> </template> <script>import { defineComponent } from 'vue'export default defineComponent({name: 'Toast',props: {value: {type: String,default: ''},duration: {type: Number,default: 3000},background: {type: String,default: '#000'},color: {type: String,default: '#fff'}}}) </script><style> .toast-box {position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;display: flex;align-items: center;justify-content: center;z-index: 1000; }.toast-value {max-width: 100px;background: rgb(8, 8, 8);padding: 8px 10px;border-radius: 4px;text-align: center;display: inline-block;animation: anim 0.5s;}@keyframes anim { 0% {opacity: 0;}100%{opacity:1;}}.toast-value.remove{animation: remove 0.5s;}@keyframes remove { 0% {opacity: 1;}100%{opacity:0;}} </style>

2、index.js 導出Toast方法

• 創建
  首先使用createVNode方法創建一個vNode獨享
  使用render方法轉換成真實dom
  添加到body上

• 銷毀
  首先添加一個淡入淡出效果
  使用render將真實設置為null
  移除創建的dom

以下代碼為TS寫法，不支持部分去掉代碼即可

import { createVNode, render } from 'vue' import toastTemplate from './index.vue' export interface IProps {value?: string;duration?: number;background?: string;color?: string; } const defaultOpt = { // 創建默認參數duration: 3000 }export interface ResultParams {destory?: () => void; } // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types const Toast = (options: IProps):ResultParams => {const container = document.createElement('div')const opt = {...defaultOpt,...options}const vm = createVNode(toastTemplate, opt) // 創建vNoderender(vm, container)document.body.appendChild(container) // 添加到body上const destory = ()=> {const dom = vm.el as HTMLDivElementif(dom.querySelector('.toast-value')) {dom.querySelector('.toast-value')?.classList.add('remove') // 銷毀時添加淡入淡出效果const t = setTimeout(() => { // 淡入淡出效果之后刪除dom節點render(null, container)document.body.removeChild(container)clearTimeout(t)},500);} }if(opt.duration) { // 如果傳入的值為0可以持續保留在頁面，需要手動銷毀const timer = setTimeout(()=> {destory()clearTimeout(timer)}, opt.duration)}return {destory} } export default Toast

3、main.js插件全局引入

import Toast from '@/components/Toast/index'app.config.globalProperties.$toast = Toast; // app.use(Toast) 用use來全局載入會導致我們不能使用this的地方不太好調用。

4、使用

this.$toast({value: 'toast',duration: 0, // 如果大于0則不必使用destory方法background: '#000',color: '#fff' }) setTimeout(() => {this.$toast.destory && this.$toast.destory() }, 2000)

setup內使用

import { getCurrentInstance} from 'vue'setup() {const { proxy } = getCurrentInstance();const showToastEvent = () => {proxy.$toast({value: 'toast',duration: 1000,background: '#000',color: '#fff'})}return {showToastEvent,} }

loading

<template><div class="loading">加載中...</div> </template><script>export default {name: "loading",} </script><style scoped>.loading {position: fixed;left: 50%;top: 50%;background-color: rgba(0, 0, 0, 0.2);color: white;transform: translate(-50%, -50%);border-radius: 4px;padding: 8px 10px;z-index: 1000;} </style> import { createApp } from "vue"import Loading from './loading.vue'export default {instance: null,parent: null,times: 0, // 為了保證多個同時loading的時候，只顯示一個，并且需要全部close之后才消失open() {if (this.times == 0) {this.instance = createApp(Loading)this.parent = document.createElement("div")let appDom = document.getElementById('app')appDom.appendChild(this.parent)this.instance.mount(this.parent)}this.times ++},close() {this.times --if (this.times <= 0) {this.times = 0let appDom = document.getElementById('app')this.instance.unmount(this.parent)appDom.removeChild(this.parent)}} }; import loading from '@/components/loading/index' app.config.globalProperties.$loading = loading;

總結

以上是生活随笔為你收集整理的vue3.x全局toast、message、loading组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。