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)

参数名 类型 说明
content string 必选,提示的内容
Setting Object 可选,控制样式参数

Setting属性说明:

属性名 类型 默认值 说明
icon String remind 图标类型,设置为"none"时不显示图标,可取值:remind,error,danger,success,disable,help,none
iconColor String 跟随图标变化 图标颜色,默认颜色跟随图标变化,可以设置一个值覆盖默认颜色,支持十六进制颜色代码/rgb/rgba
fontColor String #555555 文字颜色,支持十六进制颜色代码/rgb/rgba
textAlign String flex-start 文字对齐方式,取值范围和css中justify-content一致
background String rgba(238,238,238,0.8) 背景颜色,支持十六进制颜色代码/rgb/rgba
closeButton Boolean false 是否显示关闭按钮,设置为"true"时显示关闭按钮
closeButtonColor String #555555 关闭按钮颜色,支持十六进制颜色代码/rgb/rgba
duration Int 2000 消息持续时间,单位:ms,设置为0时,不自动收起消息
data Any null 自定义数据,将在触发clickMessage事件时候返回

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>
    
        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
            }
        }
    
    <style>
        .buttonGroup {display: flex;justify-content: center;flex-flow: wrap;}
        .buttonGroup>button {width: 40%;margin: 10px 5px 0 5px;}
    </style>

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问