Vue自定义全局弹出提示（Toast）组件

最新推荐文章于 2024-08-07 14:20:12 发布

_nicedays

最新推荐文章于 2024-08-07 14:20:12 发布

阅读量2.1k

点赞数 1

分类专栏：前端 js Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qqq6654066/article/details/122282057

版权

前端同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

Vue

16 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue中创建一个自定义的Toast组件，用于显示弹出提示信息。首先，在index.vue中定义了组件的模板、样式和数据。接着，在index.js中编写核心逻辑，包括注册组件、设置默认参数、生成Vue子类实例并挂载到DOM中，以及实现定时消失功能。最后，在main.js中全局注册组件，使得在应用的任何页面都可以通过`this.$Toast()`来调用。

摘要由CSDN通过智能技术生成

首先创建文件夹和文件

在index.vue里面写弹出的功能和样式

<template>
	<div class="toast">{{text}}</div>
</template>

<script>
	export default {
	  name: 'toast',
	  data(){
		  return{
			  text:""
		  }
	  }
	}
</script>

<style>
	.toast{
		background-color: #C0C0C0;
		color: #FFFFFF;
		margin: auto auto;
		top:50%;
		left: 50%;
		padding:20px;
		position: absolute;
		border-radius: 10px;
		font-size: 20px;
	}
</style>

然后在index.js中写核心的处理逻辑

import toast from './index.vue'

export default {
	// 注册Toast
	install(Vue) {
		Vue.prototype.$Toast = (text, opts) => {
			// 设置默认参数，可设置多个
			let defaultOpts = {
				duration: 2000
			}
			opts = Object.assign(defaultOpts, opts);
			// 生成一个Vue的子类
			let toastTpl = Vue.extend(toast);
			// 生成一个该子类的实例
			let tpl = new toastTpl().$mount();
			// 并将此div加入全局挂载点内部
			document.body.appendChild(tpl.$el);
			// 修改提示语
			tpl.text = text;
			// 定时消失
			setTimeout(() => {
				document.body.removeChild(tpl.$el);
			}, opts.duration)
		}
	}
}

然后在main.js中注册组件