1.创建一个组件（用于编程式调用的)
<template>
<div class='toast'
v-show='isShow'>
{{message}}
</div>
</template>
<script>
export default {
data () {
return {
message: '',
isShow: false
}
},
methods: {
show (message, duration) {
this.message = message
this.isShow = true
setTimeout(() => {
this.isShow = false
this.message = ''
}, duration)
}
}
}
</script>
<style scoped>
.toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
padding: 8px 10px;
background-color: rgba(0, 0, 0, 0.3);
}
</style>
2.实现编程式
import Toast from './toast'
const obj = {}
obj.install = function (Vue) {
// 创建构造器
const ToastContrystor = Vue.extend(Toast)
// new的方式 根据组件构造器，可以创建组件对象
const toast = new ToastContrystor()
// 手动挂载某一个元素上
toast.$mount(document.createElement('div'))
// toast.$el对应的就是div
document.body.appendChild(toast.$el)
//组件挂载到Vue原型上
Vue.prototype.$toast = toast
}
export default obj
3.在main.js注册
import Vue from 'vue'
import toast from '@/components/common/toast/index.js'
Vue.use(toast)
4.使用
this.$toast.show('这不是一个错误',1000)
