代码是跟着coderwhy王红元老师的视频打的,这里主要是记录一下
**说明:**想要的效果:监听事件的点击,调用一个method,method中再调用this.$toast.show(message,duration),其中message为提示语,duration为提示语的显示时长
步骤(以下步骤非严格步骤顺序,太麻烦就直接整个文件代码放上来了):
1. 创建一个components文件夹,其中包含两个文件,index.js和toast.vue
2. 编辑toast.vue组件的样式
<template>
<div class="toast" v-show="isShow">
<div>{{message}}</div>
</div>
</template>
<script>
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);
}
}
};
</script>
<style>
.toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: rgba(0, 0, 0, 0.75);
padding: 8px 10px;
color: white;
border-radius: 5px;
z-index: 9999;
}
</style>
3. 编辑main.js
import Vue from 'vue'
import App from './App.vue'
// 默认导入index.js
import Toast from 'components/common/toast';
Vue.config.productionTip = false
// 安装插件
Vue.use(Toast);//会默认执行install函数
new Vue({
render: h => h(App)
}).$mount('#app')
4. 编辑index.js文件
import Toast from "./Toast"
const toast = {}
// 当main.js中Vue.use(Toast)后会默认执行install函数,并且会默认传入一个参数Vue
toast.install = function(Vue){
// 1.创建组件构造器
const toastConstructor = Vue.extend(Toast)
// 2.根据组件构造器创建一个组件对象
const toast = new toastConstructor()
//3.把toast组件对象挂载到新的元素div中
toast.$mount(document.createElement('div'))
// 4.toast.$el对应的就是div
document.body.appendChild(toast.$el)
// 在原型中定义$toast
Vue.prototype.$toast = toast;
}
export default toast
5. 使用toast,监听事件执行函数
<template>
<div class="detail">
<button @addToCart="addToCart"></button>
</div>
</template>
<script>
export default {
name: "Detail",
methods: {
addToCart() {
this.$toast.show("加入购物车成功",2000)
}
}
};
</script>