vue组件弹窗

定义弹窗组件

　　先写一个普通的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>

效果图

巴特西

vue组件弹窗

最新文章

热门文章