• 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)
    };
     
    本人小白,各位想踏入前端的,我们可以一起学习,欢迎程序员大佬的指点
  • 相关阅读:
    Saiku相关异常处理(十五)
    Saiku登录源码追踪.(十三)
    Saiku调用WS接口(十四)
    Saiku本地编译运行后Debug调试(十二)
    Windows查看Java内存使用情况
    Saiku免登录嵌入其他系统使用(十一)
    Saiku更改源代码实现默认查询一天的数据(十)
    Saiku关于MDX过滤的使用-默认显示最近一周的数据(九)
    Saiku部分函数解析(八)
    Saiku缓存处理(七)
  • 原文地址:https://www.cnblogs.com/xiao-lei-ge/p/12628540.html
Copyright © 2020-2023  润新知