VUE自定义吐司toast

一个在学习vue的小白，各种折腾，最近页面需要用到toast，故查了部分资料。

使用toast有两个方式，

一个是使用第三方插件（这个网上很多，大家可以自行搜索，上个链接供大家参考https://www.npmjs.com/package/vue2-toast）；

另一个方式是自定义一个toast，效果见下图：

文件目录：

index.js文件代码：

import Vue from 'vue'
import toast from './toast.vue'
// 创建组件构造器
const toastHonor = Vue.extend(toast);export default function ({text="要显示的内容",time=2000,type=undefined}={}) {return new Promise((reslove, reject) => {let toastComponent = new toastHonor({el: document.createElement('div')});toastComponent.text = text;toastComponent.time = time;toastComponent.type = type;//插入到bodydocument.body.appendChild(toastComponent.$el)// 回调函数toastComponent.close = function () {reslove();};})
}

toast.vue组件代码：

<template><transition @before-leave="beforeLeave" @after-leave="afterLeave" name="slide-fade"><div @click="hideToast" v-show="isShow" class="toast"><div class="main"><div v-if="type" class="icon-box" flex="main:center cross:center"><i v-show="type==='succeed'" class="iconfont icon-ic_select_simple font30 orange2"></i></div><div class="text">{{text}}</div></div></div></transition></template><script>export default {props: {text: {type: String},time: {type: Number},type: {type: String},},mounted() {this.$nextTick(() => {this.isShow = true;this.timer = setTimeout(() => {this.hideToast();}, this.time)});},data() {return {isShow: false,timer: null,};},methods: {hideToast() {this.isShow = false;clearTimeout(this.timer);this.timer = null;},beforeLeave() {this.close();},afterLeave() {document.body.removeChild(this.$el);}}};</script><style scoped>.toast {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;z-index: 9999;}.main {display: inline-block;padding: 0.5rem 1rem;min-width: 10vm;/*max-width: 4.4rem;*/border-radius: .5rem;background-color: rgba(66, 63, 56, 0.8);}.icon-box {margin: 0 auto .1rem;width: .7rem;height: .7rem;border-radius: 50%;overflow: hidden;background-color: #fff;}.text {font-family: 'Avenir', Helvetica, Arial, sans-serif;font-size: 4vw;/*line-height: 7.5vw;*/color: #fff;}.slide-fade-enter-active {transition: all 0.3s ease;}.slide-fade-leave-active {transition: all 0.3s ease;}.slide-fade-enter {transform: translate(-50%, -1.2rem);opacity: 0;}.slide-fade-leave-to {transform: translate(-50%, 0.5rem);opacity: 0;}</style>

使用方式：

在组件中导入

import toast from "../../components/myToast/index.js";

组件代码--页面部分，一个按钮点击事件触发吐司：

<button @click="showToast">点击显示我的吐司</button>

事件调用方式：

methods:{showToast(){toast({text:"我是吐司，我显示3s",time:3000}).then(()=>{console.log("关闭后执行");}).catch(()=>{})}}

可以根据项目需求修改toast组件，达到项目要求。

大部分内容参考https://blog.csdn.net/weixin_37745920/article/details/101371944。大家可以参照。