如果不需要this$showToast.load('正在加载') 这样的需求 把它封装成 组件就可以了 你可以看看 (也是我写的效果一样)
https://blog.csdn.net/echo_Ae/article/details/89530951
效果图
1、新建一个js文件(如showToast.js)这个记得要在main.js引入(入口文件)
const showToast = {
/**
* @param {*} content 文字内容
* @param {*} show 是否显示
* @param {*} type 展示相应图标，支持 load / success / fail
* @param {*} duration 显示时长，单位为 ms，默认 2800
*/
// 弱提示(加载)
loading(content = '正在加载') {
let type = 'load'
this.hint(content, type)
},
// 弱提示(成功)
success(content = '操作成功', duration = 2800) {
let type = 'success'
this.hint(content, type, duration)
},
// 弱提示(失败)
fail(content = '操作失败', duration = 2800) {
let type = 'fail'
this.hint(content, type, duration)
},
// 隐藏弱提示(加载、成功、失败)
hideShowToast() {
if (document.getElementById('toastLoaderFullScreen')) {
document.body.removeChild(document.getElementById('toastLoaderFullScreen'))
}
},
// 显示弱提示(成功、失败)
hint(content = '', type = '', duration = '') {
if (document.getElementById('toastLoaderFullScreen')) {
document.body.removeChild(document.getElementById('toastLoaderFullScreen'))
}
// 容器
let toastLoaderFullScreen = document.createElement('div')
toastLoaderFullScreen.id = 'toastLoaderFullScreen'
document.body.appendChild(toastLoaderFullScreen)
// 遮罩
let toastLoaderContent = document.createElement('div')
toastLoaderContent.id = 'toastLoader_content'
toastLoaderContent.className = 'toastLoader_toast_show'
toastLoaderFullScreen.appendChild(toastLoaderContent)
// 创建图片
let img = document.createElement('img')
switch (type) {
case 'load':
img.className = 'toastLoader_loadImg_content'
img.src = './static/img/public/loading1.png'
break
case 'success':
img.src = './static/img/public/success.png'
break
case 'fail':
img.src = './static/img/public/fail.png'
break
}
toastLoaderContent.appendChild(img)
// 创建提示内容
let toastLoaderText = document.createElement('div')
toastLoaderText.id = 'toastLoaderText'
toastLoaderText.innerHTML = content
toastLoaderContent.appendChild(toastLoaderText)
if (type !== 'load') { // 不是加载效果才会定时隐藏
// 定时隐藏
let timerDuration = setTimeout(() => {
if (document.getElementById('toastLoader_content')) {
document.getElementById('toastLoader_content').className = 'toastLoader_toast_hide'
}
clearTimeout(timerDuration)
let timerDuration1 = setTimeout(() => {
if (document.getElementById('toastLoaderFullScreen')) {
document.body.removeChild(document.getElementById('toastLoaderFullScreen'))
}
clearTimeout(timerDuration1)
}, 200)
}, duration)
}
}
}
export default {
install(vue) {
if (!vue.$showToast) {
vue.$showToast = showToast
}
vue.mixin({
created: function() {
this.$showToast = vue.$showToast
}
})
}
}2.新建一个css文件(如toast.css) 这个记得要在index.html引入
/* 弱提示css */
#toastLoaderFullScreen {
font-size: 62.5%;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
z-index: 99999;
overflow: hidden;
word-break: break-all;
background-color: transparent;
}
/* 遮罩 */
#toastLoader_content {
width: 8rem;
text-align: center;
border-radius: 0.5rem;
position: fixed;
top: 40%;
left: 50%;
margin-left: -4rem;
z-index: 99999;
/* background:hsla(0, 40%, 100%, 0.5); */
/* background: hsl(0, 20%, 90%); */
background: rgba(0, 0, 0, 0.7);
}
/* 图片 */
#toastLoader_content img {
width: 3.3rem;
height: 3.3rem;
margin-top: 0.5rem;
}
/* 加载图片 */
.toastLoader_loadImg_content {
width: 2rem !important;
height: 2rem !important;
margin: 1.1rem 0 0.6rem 0 !important;
animation: loadImg 3.5s infinite;
}
/* 加载动画 */
@keyframes loadImg {
0% {
transform: rotate(0);
animation-timing-function: linear;
}
50% {
transform: rotate(900deg);
animation-timing-function: linear;
}
100% {
transform: rotate(1800deg);
animation-timing-function: linear;
}
}
/* 图标 */
#toastLoader_content .material-icons {
/* margin-top: 1rem; */
animation: oastLoaderIconsShow ease 800ms;
}
/* 图标显示动画 */
@keyframes oastLoaderIconsShow {
0% {
opacity: 0;
transform: translate3d(0, 10, 0) scale(0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
/*提示框显示动画*/
.toastLoader_toast_show {
animation: oastLoaderToastShow ease 800ms;
}
@keyframes oastLoaderToastShow {
0% {
opacity: 0;
transform: translate3d(0, 10, 0) scale(0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
/*提示框隐藏动画*/
.toastLoader_toast_hide {
animation: oastLoaderToastHide ease 800ms;
}
@keyframes oastLoaderToastHide {
0% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
100% {
opacity: 0;
transform: translate3d(0, 0, 0) scale(0);
}
}
/* 提示文字 */
#toastLoaderText {
margin: 0 0.5rem 0.5rem 0.5rem;
word-wrap: break-word; /*自动换行*/
text-align: center;
font-size: 0.8rem;
color: #fff;
/* background-color: red; */
}3.注册
index.html
<!-- 弹框(toast)css -->
<link rel="stylesheet" href="path/toast.css">main.js
import Vue from 'vue'
import showToast from 'path/showToast'
Vue.use(showToast)4.使用
<style>
</style>
<template>
<div>
<div><button @click="buttom('test')">一套效果</button></div>
<div><button @click="buttom('load')">加载</button></div>
<div><button @click="buttom('success')">成功</button></div>
<div><button @click="buttom('fail')">失败</button></div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
// 页面初始化 created activated
created() {
},
// 监听变量
watch: {
},
// 页面加载完
mounted() {
},
// 页面离开 destroyed deactivated
destroyed() {
},
methods: {
buttom(type) {
switch(type) {
case 'test':
this.$showToast.loading('正在加载')
setTimeout(() => {
this.$showToast.success('操作成功')
}, 2800)
break
case 'load':
this.$showToast.loading('正在加载')
setTimeout(() => {
this.$showToast.hideShowToast()
}, 2800)
break
case 'success':
this.$showToast.success('加载成功')
break
case 'fail':
this.$showToast.fail('加载失败')
break
case 'hideShowToast':
this.$showToast.hideShowToast()
break
}
}
}
}
</script>github里面有图片
