vue@cli3框架toast动画提示

一：封装一个vue组件，并引入组件

Toast里的代码如下

<template>

    <transition

        enter-class

        enter-active-class="animated fadeIn"

        enter-to-class

        leave-class

        leave-active-class="animated fadeOut"

        leave-to-class

    >

        <div class="toast" v-if="bln">{{text}}</div>

    </transition>

</template>

<script>

export default {

    data() {

        return {

            bln: false,

            text: ""

        };

    },

    //中央事件总线

    created() {

        this.$eventbus.$on(

            "toast",

            function(str) {

                this.bln = !this.bln;

                this.text = str;

                setTimeout(() => {

                    this.bln = !this.bln;

                }, 2500);

            }.bind(this)

        );

    }

};

</script>

<style scoped>

.toast {

    padding-top: 5px;

    text-align: center;

    width: 150px;

    height: 40px;

    transform: translate(-50%, -50%);

    position: fixed;

    left: 50%;

    top: 50%;

    background: rgba(0, 0, 0, 0.7);

    color: white;

    border-radius: 5px;

    z-index: 999999999999;

}

</style>

二：可在app.vue里用import引入组件

三：在main.js里写以下代码

import "./assets/style/animate.min.css"//注释：transition动画效果用到，需引入，对应目录下要有animate.min.css文件

Vue.prototype.$eventbus = new Vue();

Vue.prototype.$toast=function(str){//注释：挂在到vue原型上

  this.$eventbus.$emit("toast",str)

};