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组件相关推荐

React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
Flutter EasyLoading - 让全局Toast/Loading更简单
✨flutter_easyloading: 一个简单易用的Flutter插件,包含23种loading动画效果.进度条展示.Toast展示.纯Flutter端实现,支持iOS.Android. ✨开源 ...
react如何控制全局loading_ReactJS实践（一）—— FrozenUI React化之Loading组件
在前面我们通过四篇文章入门了React的大部分主要API,现在则开始进入实践环节. 实践系列的开篇打算拿我司的FrozenUI来试验,将其部分UI组件进行React化,作为第一篇实践文章,将以较简单的 ...
react如何控制全局loading_React Loading组件的正确姿势
React Loading组件的正确姿势页面异步加载的时候为缓解用户等待的焦虑情绪,我们通常会采取加载中...等文字或图标提示. (图例,各种加载中状态) 日常写法直接在state中存一个load ...
element-ui clearable 不显示_从ElementUI的loading组件说起
原文地址: 从ElementUI的loading组件说起alfxjx.github.io 前言最近发现自己的主页首屏加载很慢,于是想用一个loading组件掩饰一下,这一下就来到了知识的荒原,对插 ...
最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评
本文完整版:<最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评> Vue 实时消息提示通知 Vue-notification - 专注实 ...
Vue 2.x折腾记 - (15) 捣鼓一个中规中矩loading组件
前言最近有一个新的项目,UI大佬不知道从哪里找来了一张GIF丢到蓝湖, 说作为全局的页面loading ,但是自己想了想,还是选择画一个. 一开始想过用svg,canvas,最终还是选择了css3+ ...
Vue3项目 —— Vite / Webpack 批量注册组件
勇者愤怒,抽刃向更强者:怯者愤怒,却抽刃向更弱者. 人生的许多大困难,只要活着,没有什么是解决不了的,时间和智慧而已. 前期回顾 Vue3 中 reactive 和 ref 和 toRefs ...
vue 项目中使用 Loading 组件
当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中 <template>< ...

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

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

Toast组件

loading

vue3.x全局toast、message、loading组件相关推荐

最新文章

热门文章