vue自定义toast插件
程序员文章站
2024-03-05 11:06:54
...
- 创建配置文件index.js 和Toast.vue模板
import Toast from './Toast'
const obj = {}
obj.install = function (Vue) {
// console.log('执行toast函数',Vue);
// Vue.prototype.$toast = 对象 将$toast 加入到vue原型中
//1.创建组件构造器
const toastContrustor = Vue.extend(Toast) //将toast组件添加到构造器中
//2.new的方式,根据创建的构造器,创建一个组件对象
const toast = new toastContrustor()
//3.将组件对象手动挂载到某个元素中 $mount 挂载
toast.$mount(document.createElement('div'))
//4.toast.$el就是对应的div 将 div添加到body中
document.body.appendChild(toast.$el)
Vue.prototype.$toast = toast
}
export default obj
<template>
<div class="toast" v-show="isShow">
{{message}}
</div>
</template>
<script>
export default {
data() {
return {
isShow:false,
message:''
}
},
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%);
padding: 15px 25px;
color: #fff;
background: rgba(0, 0, 0, .7);
z-index: 999;
border-radius: 10px;
text-align: center;
}
</style>>
</style>
- 引入到Main.js注册
//自定义toast插件
import toast from 'common/toast'
Vue.use(toast)
- 调用安装的插件
this.$toast.show(res, 1000)