前言
提示
一、实现效果
点击按钮,出现对应提示内容的弹窗
二、项目结构
三、具体代码
1.main.js文件
import toast from 'components/common/toast'
//安装toast插件
Vue.use(toast)
2.toast文件夹
2.1 index.js文件
import Toast from './Toast'
const obj={}
obj.install = function (Vue){
// document.body.appendChild(Toast.$el)
//1创建组件构造器
const toastConstrustor = Vue.extend(Toast)
//2 new的方式 根据组件构造器 可以创建出来一个组件对象
const toast =new toastConstrustor()
//3 将组件对象 手动挂载到某一个元素上
toast.$mount(document.createElement('div'))
//4 toast.$el 对应的就是div
document.body.appendChild(toast.$el)
Vue.prototype.$toast =toast;
}
export default obj
2.2 Toast.vue文件
<template>
<div class="toasts" v-show="isShow">
<div >{{msg}}</div>
</div>
</template>
<script>
export default {
name:'Toast',
data() {
return {
msg:'',
isShow:false
}
},
methods: {
show(msg='默认文字',duration=2000){
this.isShow =true;
this.msg=msg
setTimeout(() => {
this.isShow =false;
this.msg=''
}, duration);
}
},
}
</script>
<style scoped>
.toasts{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 15px;
background-color: rgba(0, 0, 0, .7);
z-index: 999;
color: #fff;
}
</style>
3.使用toast的vue文件
<div class="cart" @click="addToCart">加入购物车</div>
this.addCart(product).then(
res =>{
this.$toast.show(res)
}
)
总结
插件封装方式很好用,主要使用Vue.extend。
(技术点原理还没太弄清,功能实现了,只是先搬个砖)