Toast.vue
<script>
import { defineComponent} from "vue";
export default defineComponent({
setup() {
return {
};
},
data () {
return {
}
},
props:{
//是否显示弹框
show_toast:{
type:Boolean,
default:false
},
//内容去
message:{
type:String,
default:'',
},
toast_type:{
type:String,
default:""
},
duration:{
type:Number,
default:1500
},
//盒子的宽度
widthStr:{
type:String,
default:""
}
},
async mounted() {
},
created(){
},
methods: {
},
watch: {
},
computed: {
},
});
</script>
<template>
<div class="honel">
<!-- <div class="tipss"> -->
<div v-if="show_toast" class="tips">
<p>{{message}}</p>
</div>
<!-- </div> -->
</div>
</template>
<style lang="less" scoped>
body,html{
height: 100%;
}
*{
margin: 0;
padding: 0;
}
.honel{
width: 100%;
position: relative;
}
img{
display: block;
}
// .tipss{
.tips{
margin: 0 auto;
// width: 2.04rem;
height: 0.44rem;
background: #000000;
margin-top: 1rem;
text-align: center;
display: flex;
align-items: center;
flex-wrap:wrap;
border-radius: 0.24rem;
position: fixed;
bottom: 5%;
left: 50%;
transform: translate(-50%,-5%);
z-index: 3;
opacity: 0.8;
// animation: mymove 0.3s linear;
p{
font-size: 0.14rem;
color: #FFFFFF;
margin: 0 auto;
font-weight: 400;
font-family: PingFang SC;
padding-left: 0.2rem;
padding-right: 0.2rem;
}
// }
}
// @keyframes mymove{
// from{
// position: fixed;
// bottom: 0%;
// left: 50%;
// transform: translate(-50%,-10%);
// opacity: 0;
// }
// to{
// position: fixed;
// bottom: 10%;
// left: 50%;
// transform: translate(-50%,-50%);
// opacity: 1;
// }
// }
</style>
Toast.js
import { createVNode, render } from "vue";
import Notice from "./Tips.vue";
let mountNode = null;
export default (options) => {
const duration = options.duration | 2000;
//确保只存在一个弹框，如果前一个弹窗还在，就移除
if (mountNode) {
document.body.removeChild(mountNode);
mountNode = null;
}
//将options参数传入，并将Notice组件转换成虚拟DOM，并赋值给app
const app = createVNode(Notice, {
...options,
duration,
show_toast: true,
});
//创建定时器，duration时间后将mountNode移除
let timer = setTimeout(() => {
mountNode && document.body.removeChild(mountNode);
mountNode = null;
clearTimeout(timer);
}, duration);
//创建一个空的div
mountNode = document.createElement("div");
//render函数的作用就是将Notice组件的虚拟DOM转换成真实DOM并插入到mountNode元素里
render(app, mountNode);
//然后把转换成真实DOM的Notice组件插入到body里
document.body.appendChild(mountNode);
};
xxx.js
import Notice from '../components/Tips/Tips'
console.log(i18n);
export function getCode(code) {
switch (code) {
case 0:
Notice({message:i18n.global.t("customer.logintitle")})
break;
default:
Notice({message:'error'})
}
}
