Toast.js
<template>
<div class="toast" v-show="show">
<span >{{text}}</span>
</div>
</template>
<script>
export default {
};
</script>
<style>
.toast {
background-color: rgba(0,0,0,.6);
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
padding: 10px 30px;
border-radius: 5px;
}
.toast span {
color: #fff;
}
</style>
Toast.js代码
import Vue from 'vue'
import Toast from './Toast.vue'
// console.log(Toast);
// 使用vue.extend方法生成了 组件ToastConstructor 的构造函数
const ToastConstructor = Vue.extend(Toast)
// console.log(ToastConstructor);
// 使用ToastConstructor 生成组件实例
function toastRender (text,delay) {
const ToastDOM = new ToastConstructor({
el:document.createElement('div.toast'),
data() {
return {
text,
show:true
}
}
})
document.body.appendChild(ToastDOM.$el)
setTimeout(() =>{
ToastDOM.show = false
document.body.removeChild(ToastDOM.$el)
},delay)
}
function toastRegister () {
Vue.prototype.$toast = toastRender
}
export default toastRegister
.APP页面调用
<template>
<div id="app">
<button @click="showToast">点击弹出提示</button>
<Loading text="加载中..." @closeLoading="closeLoading"></Loading>
</div>
</template>
<script>
export default {
name: 'App',
methods:{
showToast() {
this.$toast('你好',2000)
},
closeLoading(num){
console.log(num);
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
