平台兼容性

2019-02-28 更新

1. 修复关闭按钮不显示的问题

2019-01-31 更新

1. 修正H5平台消息顶部不在导航之下的问题
2. 消息层z-index由原来99999改为997

2019-01-28 更新

1. 修复Timer未定义问题
2. 尺寸单位改为upx

2019-01-10 更新

1. 修正APP-PLUS平台，页面设置titleNView.type为transparent消息被盖住问题

• 遇到问题或有建议可以直接提问
• 如果觉得模板不错给五星鼓励鼓励？

使用说明

    import HMmessages from "@/components/HM-messages/HM-messages.vue"
    export default {
        components: {HMmessages}
    }

在 template 中使用组件

<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>

调用方法

show方法

显示消息

this.HMmessages.show('默认效果')

this.HMmessages.show(content,Setting)

Setting属性说明:

close方法

收起消息

this.HMmessages.close() 

示例代码

墙裂建议开发者遇到问题时候先复制示例代码看看是否能正常运行，我QQ收到的反馈中大部分错误是自己代码有地方写错了，可以仔细对照示例代码看自己是否有地方写错了。

    <template>
        <view class="buttonGroup">
            <HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>
            <button @tap="sample('remind')">默认提示</button>
            <button @tap="sample('error')">错误提示</button>
            <button @tap="sample('danger')">危险提示</button>
            <button @tap="sample('success')">成功提示</button>
            <button @tap="sample('disable')">禁用提示</button>
            <button @tap="sample('help')">帮助提示</button>
            <button @tap="sample('fontColor')">改变文字颜色</button>
            <button @tap="sample('background')">改变背景颜色</button>
            <button @tap="sample('iconColor')">改变图标颜色</button>
            <button @tap="sample('noIcon')">不要提示图标</button>
            <button @tap="sample('closeButton')">显示关闭按钮</button>
            <button @tap="sample('closeButtonColor')">关闭按钮颜色</button>
            <button @tap="sample('forever')">一直显示</button>
            <button @tap="sample('close')">收起提示</button>
            <button @tap="sample('center')">文字居中</button>
        </view>
    </template>
    <script>
        import HMmessages from '@/components/HM-messages/HM-messages.vue';
        export default {
            data() {
                return {}
            },
            methods: {
                clickMessage(data){
                    console.log("消息被点击，接受数据:"+JSON.stringify(data));
                },
                sample(type){
                    console.log(type);
                    switch(type){
                        case 'remind':
                            this.HMmessages.show('默认效果',{data:{test:'test'}});
                            break;
                        case 'error':
                            this.HMmessages.show('错误提示',{icon:type});
                            break;
                        case 'danger': 
                            this.HMmessages.show('危险提示',{icon:type});
                            break;
                        case 'success':
                            this.HMmessages.show('成功提示',{icon:type});
                            break;
                        case 'disable':
                            this.HMmessages.show('禁用提示',{icon:type});
                            break;
                        case 'help':
                            this.HMmessages.show('帮助提示',{icon:type});
                            break;
                        case 'fontColor':
                            this.HMmessages.show('我换颜色啦',{icon:'success',fontColor:"#ff0000"});
                            break;
                        case 'iconColor':
                            this.HMmessages.show('图标也换颜色啦',{icon:'success',iconColor:"#7c2491"});
                            break;
                        case 'background':
                            this.HMmessages.show('怎么感觉背后好像和以前不一样',{icon:'success',background:"rgba(255,255,225,.8)"});
                            break;
                        case 'closeButtonColor':
                            this.HMmessages.show('关闭按钮颜色也可以改哦',{icon:'success',closeButton:true,closeButtonColor:"#3388ff",duration:0});
                            break;  
                        case 'noIcon':
                            this.HMmessages.show('没有提示图标',{icon:'none'});
                            break;  
                        case 'closeButton':
                            this.HMmessages.show('可以点击关闭按钮收起',{icon:'success',closeButton:true,duration:0});
                            break;
                        case 'forever':
                            this.HMmessages.show('我不会自动收起',{icon:'success',duration:0});
                            break;
                        case 'close':
                            this.HMmessages.close();
                            break;
                        case 'center':
                            this.HMmessages.show('看看我是不是在中间',{icon:'none',textAlign:'center'});
                            break;
                    }
                }
            },
            components: {
                HMmessages
            }
        }
    </script>
    <style>
        .buttonGroup {display: flex;justify-content: center;flex-flow: wrap;}
        .buttonGroup>button {width: 40%;margin: 10px 5px 0 5px;}
    </style>