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组件代码：

使用方式：

在组件中导入

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

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

点击显示我的吐司

事件调用方式：

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

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！