• 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;
         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)
    };
     
    本人小白,各位想踏入前端的,我们可以一起学习,欢迎程序员大佬的指点
  • 相关阅读:
    python17 .导模块的细节 包的概念 包中的相对导入语法 包的管理 _init_py文件的使用
    @lazy注解
    @Scope注解
    @ComponentScan 注解
    Spring IOC
    Spring体系
    java守护线程
    java线程优先级
    java线程生命周期
    java线程中start和run的区别
  • 原文地址:https://www.cnblogs.com/xiao-lei-ge/p/12628540.html
Copyright © 2020-2023  润新知