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	是否展示关闭按钮

回调方法：

因为我们在这里没有采用父子组件的方式，所以默认使用的时候再写一个“clickBtn”的方法来处理回调的事件。在这里插入图片描述

这里如果大家有更好的做法欢迎指点。在这里插入图片描述

4 使用方法

调用方法：在这里用了call将使用的地方的this传了进了公用方法里面。

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

5 源码

export const notification = {
    showPopUpMessage(data) {
        const defaultProps = {
            title: '消息提醒',
            position: 'top-right',
            mess: '信息内容', // 主体信息内容
            buttonName: '按钮',
            duration: 0, // 展示时间，参考element组件duration
            showButton: false, // 是否展示按钮
            showClose: true,
        };
        data = Object.assign(defaultProps, data);
        const h = this.$createElement;
        if (data.showButton) {
            this.dialogArr.push(this.$notify({
                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: () => {
                                    this.clickBtn(data);
                                },
                            },
                            attrs: {
                                name: data.name,
                                age: data.age,
                            },
                        }, data.buttonName),
                    ]),

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

封装一个Notification 通知组件