[JavaScript知识库]Vue自定义全局弹出提示（Toast）组件

首先创建文件夹和文件

在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中注册组件

然后就可以在所有页面中通过?this.$Toast()来调用了

?最终效果

?