定义弹窗组件
先写一个普通的vue组件,其显示的内容就是弹窗的内容。
文件的位置 /src/views/toast/toast.vue
<template>
<div class="wrap">已经是最底部了</div>
</template>
<script>
export default {
name: 'Toast'
}
</script> <style lang="scss" scoped>
.wrap{
position: fixed;
left: 50%;
top:50%;
background: rgba(0,0,0,.65);
padding: 10px;
border-radius: 5px;
transform: translate(-50%,-50%);
color:#fff;
}
</style>
引用弹窗组件
组件注册定义好了,那接下来就是引入组件,使用弹窗组件了。
<template>
<div class="movies-list">
<!-- 其他代码 -->
这里写页面的其他代码
<!-- 其他代码 -->
<toast v-if="cont"></toast>
</div>
</template> <script>
// 引入弹窗组件
import toast from './toast/toast';
export default {
name: 'Homepage',
components: {toast},
data() {
return {
cont: false
}
}, created () {
let _this = this;
if(某个条件为真) {
_this.cont = true;
// 显示1s
setTimeout(function(){
_this.cont = false;
}, 1000);
}
}
}
</script>
效果图