Vue组件的两种封装方式——分别实现自定义Toast的封装

前言

在前端开发中，会遇到这样的情景，点击某一个按钮弹出对应的提示，我们通常在前端中把弹出的提示叫做Toast(吐司：烘焙蛋糕时冒出的一缕烟…)，如图:

当我们点击收藏时，如果当前用户没登陆，给出登录提示。下面用两种方式来实现Toast的封装。

普通方式封装

创建一个Vue文件，封装Toast:

<template>
	<div id="toast" v-if="isShow">
		{{message}}
	</div>
</template>

<script>
	export default {
		name: "Toast",
		props: {
			message: '', // Toast内容
			isShow: false //控制Toast的显示于隐藏
		},
		
	}
</script>

<style scoped>
	#toast {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		padding: 8px 20px;
		background-color: rgba(89, 89, 89,.9);
		color: #fff;
	}
</style>

在其他组件中使用Toast:
第一步：在界面中加上

<toast :message="message" :is-show="isShow"/>

第二步：在data中定义两个变量：

data(){
	return {
		message: "",
		isShow: false,
	}
}

第三步：在点击收藏的按钮上，绑定事件，给出message——提示信息，设置Toast的出现时长：

	// 用户点击收藏
	collection() {
		// 获取user
		let user = this.$user
		if (!user) {
			// 用户未登录给出提示
			this.message = "用户未登录"
			// 显示Toast
			this.isShow = true
			// 设置Toast显示时间
			setTimeout(() => {
				// 隐藏Toast
				this.isShow = false
				// 清空message
				this.message = ""
			},1500)
		}
	},

实现效果：

但是，在开发中经常会用到Toast,我们只是希望通过它显示一些信息，以上这种组件的使用方式显得有些复杂，要在界面注册组件，使用组件，然后还要定义变量等等，那么我们能不能直接像使用alert这样调一个方法就可以了呢？

插件方式封装

第一步：对Toast组件进行一些修改：

<template>
	<div id="toast" v-show="isShow">
		{{message}}
	</div>
</template>

<script>
	export default {
		name: "Toast",
		data() {
			return {
				message: '',
				isShow: false // 控制Toast的显示于隐藏
			}
		},
		methods: {
			/**
			 * @param message 显示的内容信息
			 * @param duration // 显示的时间，默认1500ms
			 */
			isShow(message,duration=1500) {	
				// 显示Toast
				this.isShow = false
				this.message = message
				setTimeout(() => {
					this.isShow = false
					this.message = ""
				},duration)
			}
		}
	}
</script>

<style scoped>
	#toast {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		padding: 8px 20px;
		background-color: rgba(89, 89, 89,.9);
		color: #fff;
		border-radius: 10px;
		z-index：9999;
	}
</style>

第二步：在toast文件夹下创建index.js文件，目的是为了全局安装Toast组件

index.js

// 导入Toast组件
import Toast from './Toast'

const obj = {}

// 当Vue使用Vue.use()方法是会调用该方法安装组件，并将当前的Vue对象以参数的形式传过来
obj.install = function (Vue) {
	// 创建组件构造器
	const toastConstructor = Vue.extend(Toast);
	// 根据组件构造器，创建组件对象
	const toast = new toastConstructor()
	// 将组件对象挂在到某个元素上
	toast.$mount(document.createElement("div"))
	// 将该toast el节点追加到body上
	document.body.appendChild(toast.$el)
	Vue.prototype.$toast = toast // 将组件注册到全局
}
// 导出
export default obj

第三步：在main.js使用组件：

 // 注意：这里实际上导入的是index.js,只是如果js文件以index命名，可以省略不写
import Toast from 'components/toast'
// 安装自定义插件
Vue.use(Toast)

第四步：只需要在使用的地方调用方法即可：

// 用户点击收藏
collection() {
		// 获取user
		let user = this.$user
		if (!user) {
			this.$toast.show("用户未登录",2000)
		}
	},

实现了同样的效果

这种插件形式的封装不同于普通封装，我们可以在任何地方使用，非常方便，一些前端的框架其实就是这样封装的，在编码时要多利用这种封装的思想！