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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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)
		}
	}
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

1
2
3
4
import toast from './index.js'

Vue.use(toast)