定义弹窗组件
先写一个普通的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>
效果图