【uni-app】实现h5环境下页面弹出通知消息

最近用uin-app的做项目，要弄推送通知的，由于H5不能控制通知栏，便退而求其次要在页面显示通知，虽然觉得有点鸡肋，但这是需求，只能埋头敲代码，以为是要每个页面都显示，所以自己画了一个页面，在全局挂载到body下，以下是效果图，配合使用【前端】node+express模拟websocket通信更加

效果GIF.gif

在文件夹下创建了这两个文件

image.png

notify-push-model.vue

index.js

import notifyModel from '@/components/notify/notify-push-model'

const notify = {}
notify.install = (vue, options) => {
    const ToastCon = vue.extend(notifyModel)
    const ins = new ToastCon()
    ins.$mount(document.createElement('div'))
    document.body.appendChild(ins.$el)
    vue.prototype.$notify = {
        show(options) {
            if (ins.visible === true) { //如果已经是显示的
                ins.translate = 'top-leave';
                ins.close()
                setTimeout(() => {
                    if (typeof options === 'string') { // 对参数进行判断
                        ins.text = options
                    } else if (typeof options === 'object') {
                        Object.assign(ins, options) // 合并参数与实例
                    }
                    // ins.visible = true
                    ins.open()
                }, ins.closeDuration)

                if (typeof options === 'object' && options.auto) { //3s后自动隐藏
                    ins.autoHide()
                }
            } else {
                if (typeof options === 'string') { // 对参数进行判断
                    ins.text = options
                } else if (typeof options === 'object') {
                    Object.assign(ins, options) // 合并参数与实例
                }
                // ins.visible = true
                ins.open()
            }

        },
        hide() {
            ins.visible = false
            ins.translate = 'top-leave';
            ins.close()
        }

    }
}

export default notify;

main.js

/*==================|-- * 消息推送 * start --|==================*/
// #ifdef H5
import notify from '@/components/notify/index'
Vue.use(notify)
// #endif
/*==================|-- * 消息推送 * end--|==================*/

使用方法

this.$notify.show({ type: 'success', text: '您有新的订单，请注意查收！' });
//or
this.$notify.show('您有新的订单，请注意查收！' );

想模拟下在websocket通信下的状态，请点击这个页面配合使用【前端】node+express模拟websocket通信