平台兼容性

graceui-alert

带有动画的顶部信息提示框

来自 graceUI

官网 : http://grace.hcoder.net/

组件属性

msgtype : 消息类型 string , 
    msg - 普通消息 
    right - 成功消息 
    error - 错误消息
msg : 消息内容 string
show: 决定是否展示 boolean

调用代码

<template>
    <view class="grace-padding">
        <view class="btns" style="margin-top:20px;">
            <button type='primary' @tap='showMsg1'>正确操作提醒</button>
            <button type='warn' @tap='showMsg2'>错误操作提醒</button>
            <button @tap='showMsg3'>普通消息提醒</button>
        </view>
        <graceuiAlert :show="show" :msg="msg" :msgtype="msgtype"></graceuiAlert>
    </view>
</template>
<script>
    var alertTimer = null;
    import graceuiAlert from '../../components/graceui-alert/graceui-alert.vue';
    export default {
        data() {
            return {
                show : false,
                msg : '',
                msgtype : 'msg'
            }
        },
        methods: {
            showMsg1 : function(){
                this.show    = true;
                this.msgtype = "right";
                this.msg     = "操作成功 ^_^";
                //延迟关闭
                var _self = this;
                if (alertTimer != null) { clearTimeout(alertTimer);}
                alertTimer = setTimeout(function(){_self.show = false; _self.msg = '';}, 2000);
            },
            showMsg2: function () {
                this.show    = true;
                this.msgtype = "error";
                this.msg     = "操作失败!";
                //延迟关闭
                var _self = this;
                if (alertTimer != null) { clearTimeout(alertTimer); }
                alertTimer = setTimeout(function(){_self.show = false; _self.msg = '';}, 2000);
            },
            showMsg3: function () {
                this.show    = true;
                this.msgtype = "msg";
                this.msg     = "Hi! I am GraceUI alert ^_^";
                //延迟关闭
                var _self = this;
                if (alertTimer != null) { clearTimeout(alertTimer); }
                alertTimer = setTimeout(function(){_self.show = false; _self.msg = '';}, 2000);
            }
        },
        components : {
            graceuiAlert
        }
    }
</script>
<style>
.btns{width:88%; padding:50upx 6%;}
.btns button{width:100%; margin:20upx 0;}
</style>