封装一个Notification 通知组件

1 使用场景

就像下图所示，最近某个项目进入得时候会有一组信息提示，现在我们需要得是有一个可以服用得组件或者公用方法来一次性将需要的信息展示出来，在这里采用了封装element组件Notification （通知）的方式。
element原本样式：

目前的效果：

2 组件位置

@FilePath: \newmediacloud\src\plugins\tips.js

3 参数以及回调事件

参数

主要是配置项的参数传递，大部分是直接采用的element Notification自带的参数：

参数名	数据类型	默认值	其他
title	String	‘’	标题
position	String	‘top-right’	自定义弹出位置
mess	String	‘信息内容’	主体信息内容
buttonName	String	‘按钮’	按钮展示的名称
showButton	Boolean	true	是否展示按钮
duration	number	0	显示时间, 毫秒。设为 0 则不会自动关闭
showClose	Boolean	true	是否展示关闭按钮

回调方法：

回调方法：
因为我们在这里没有采用父子组件的方式，所以提供一个方法来触发组件的展示。

     notification.showPopUpMessage({
                title: '我的消息提醒',
                mess: '抖音[NAME=大帅哥]已过期，请重新授权!',
                showButton: true,
                buttonName: '立即授权',
                event: (data) => {
                    this.clickBtn(data);
                },
            });

这里如果大家有更好的做法欢迎指点。

这里如果大家有更好的做法欢迎指点。

4 使用方法

有一点需要注意，因为组件代码里面调用了createElement来创建DOM所以，暂时没有找到如何在公用的js里面替代this.$createElement的方法，所以在项目的main.js里面就把整个实例导出来了。

目前功能实现的方法：

import {
    Notification,
} from 'element-ui';
import main from '../main';
export const notification = {
    showPopUpMessage(data) {
        const defaultProps = {
            title: '消息提醒',
            position: 'top-right',
            mess: '信息内容', // 主体信息内容
            buttonName: '按钮',
            duration: 0, // 展示时间，参考element组件duration
            showButton: false, // 是否展示按钮
            showClose: true,
            event: (data) => {
            },
        };
        // const dialogArr = [];
        data = Object.assign(defaultProps, data);
        const h = main.$createElement;
        if (data.showButton) {
            Notification({
                title: data.title,
                message: h('p', { class: 'trs-notification-main' }, [
                    h('span', null, data.mess),
                    h('div', { class: 'trs-notification-button-box' }, [
                        h('button', {
                            class: 'trs-notification-button',
                            on: {
                                click: () => {
                                    data.event(data);
                                },
                            },
                            attrs: {
                                name: data.name,
                                age: data.age,
                            },
                        }, data.buttonName),
                    ]),

                ]),
                position: data.position,
                duration: data.duration, // 显示时间, 毫秒。设为 0 则不会自动关闭
            });
        } else {
            Notification({
                title: data.title,
                message: h('p', { class: 'trs-notification-main' }, [
                    h('span', null, data.mess),
                ]),
                position: data.position,
                duration: data.duration, // 显示时间, 毫秒。设为 0 则不会自动关闭
            });
        }
    },
};

调用方法：

<script>
import { notification } from '@/plugins/tips.js';
      clickBtn(data) {
            console.log(data);
        },
       open() {
            notification.showPopUpMessage({
                title: '我的消息提醒',
                mess: '抖音[NAME=大帅哥]已过期，请重新授权!',
                showButton: true,
                buttonName: '立即授权',
                event: (data) => {
                    this.clickBtn(data);
                },
            });
            this.$nextTick(() => {
                notification.showPopUpMessage({
                    title: '我的消息提醒',
                    mess: '不展示操作按钮',
                    buttonName: '立即授权',
                });
            });
        },
</script>