<template>
	<!-- 过度动画 -->
	<transition name="fade">
		<div class="toast-container" v-if="visible">
			<!-- Toast 内容 -->
			<div class="toast" :class="type">
				<div class="content">
					<i class="iconfont" :class="'icon-' + type"></i>
					<span>{
   
   { content }}</span>
				</div>
				<!-- 关闭按钮 -->
				<i v-if="hasClose" class="iconfont icon-close close" @click="visible = false"></i>
			</div>
		</div>
	</transition>
</template>

<script>
	export default {
		name: 'toast-tip',
		data() {
			return {
				content: '',
				time: 3000,
				visible: false,
				//对应的动态显示class type四种类型：info, success, warning, error
				type: 'error',
				hasClose: true,
			}
		},
		mounted() {
			this.close();
		},
		methods: {
			close() {
				setTimeout(() => {
					this.visible = false;
				}, this.time);
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 动画效果 淡入淡出 */
	.fade-enter-active,
	.fade-leave-active {
		transition: all 0.5s ease;
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}

	.toast-container {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		// 横居中
		justify-content: center;
		// 竖居中
		align-items: center;
		z-index: 99999;

		.toast {
			width: 340px;
			padding: 20px;
			border-radius: 6px;
			font-size: 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.content {
				span {
					padding-left: 10px;
				}
			}
			// 不同类型下的Toast 的显示样式
			&.info {
				background: #edf2fc;
				border: 1px solid #e0eafc;
				color: #909399;
			}

			&.success {
				background: #f0f9eb;
				border: 1px solid #e7f9de;
				color: #67c23a;
			}

			&.warning {
				background: #fdf6ec;
				border: 1px solid #f9ecda;
				color: #e6a23c;
			}

			&.error {
				background: #fef0f0;
				border: 1px solid #fbdfdf;
				color: #f56c6c;
			}
			
			//关闭按钮的样式
			.close {
				cursor: pointer;
				color: #909399;
			}
			
		}
	}
</style>

5、其中 index.js 来构建 Toast 的代码管理 vue 的数据内容与显示

// 引入 vue 和 创建的 toast vue
import Vue from 'vue'
import Toast from './index.vue'

// 创建 Toast Vue 子类
const ToastMsg = Vue.extend(Toast)

// 传入内容和 类型
Toast.install = (options, type) => {
	// 判断数据类型，并对应处理
	if (options === undefined || options === null) {
		options = {
			content: ''
		}
	} else if (typeof options === 'string' || typeof options === 'number') {
		options = {
			content: options
		}
		if (type !== undefined && options !== null) {
			options.type = type
		}
	}

	// 创建Toast实例,传入 data 数据
	let instance = new ToastMsg({
		data: options
	}).$mount()

	// 添加到 html 页面
	document.body.appendChild(instance.$el)

	// 在修改数据之后立即使用这个方法，获取更新后的 DOM
	Vue.nextTick(() => {
		instance.visible = true
	})
}

export default Toast.install

6、在 main.js 中添加 Toast 全局引入