注：对组件进行全局封装，省去每次都需要import和注册组件的麻烦

1 Html

//用于显示弹出提示信息
<div v-show="isShow" class="Toast">
	<div>{{message}}</div>
</div>

2 js

export default{
	name:'Toast',
	data(){
		return{
			message:'',
			isShow:false
		}
	},
	methods:{
		show(message,duration){
			this.isShow=true
			this.message=message
			setTimeout(()=>{
				this.isShow=false
				this.message=''
			},duration)
		}
	}
}

3 CSS

//水平垂直居中，面试必考，不会的赶紧复习
.toast{
	position:fixed;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	z-index:999;   //防止在最下面
	background-color:rgba(0,0,0,0.6);
	color:#fff;
}

4 封装

import Toast from './Toast.vue'

const obj={}

obj.install=funciton(Vue){
	//创建组件构造器
	const ToastConstructor=Vue.extend(Toast)
	//实例化组件构造器对象
	const toast=new ToastConstructor()
	//将组件对象手动挂载
	toast.$mount(document.creatElement('div'))
	//添加到body中
	document.body.appendChild(toast.$el)
	//添加到Vue原型上
	Vue.prototype.$toast=toast
}


export default obj

5 在main.js中使用

import toast from './index.js'

Vue.use(toast)

最后

以上就是忧郁小刺猬为你收集整理的Toast模块的封装1 Html2 js3 CSS4 封装5 在main.js中使用的全部内容，希望文章能够帮你解决Toast模块的封装1 Html2 js3 CSS4 封装5 在main.js中使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。