uniapp - msg组件

sunui-msg　顶部消息提醒

v1.0.0 于 2020.01.14更新：如果消息提示直接进入页面就显示，要在mounted生命周期或者在onLoad生命周期使用this.$nextTick

参数介绍(通过ref标识)：

1. text:文本提示内容/默认空

2. type:文本提示背景颜色/默认无

3. sec:点击显示时间/默认2秒

示例代码：

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png" @click="openMsg"></image>
        <sunui-msg ref="msg"></sunui-msg>
    </view>
</template>
 
<script>
    import sunUiMsg from '@/components/sunui-msg/sunui-msg.vue';
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        mounted() {
 
        },
        components: {
            'sunui-msg': sunUiMsg
        },
        onLoad() {
 
        },
        methods: {
            openMsg() {
                this.$refs.msg.show({
                    text: '提交失败',
                    type: 'error',
                    sec: 2
                });
                 
                // this.$refs.msg.show({
                //  text: '提交成功',
                //  type: 'success',
                //  sec: 2
                // });
                 
                 
                // 关于自定义弹出颜色可以在sunui-msg.vue样式扩展也可以在App.vue
                // .sunui-color-success
                // .sunui-color-error
                // 类似以上形式扩展
            }
        }
    }
</script>
 
<style>
 
</style>