this.$notify is not a function,vue使用element-ui的Notification组件时报错this.$notify is not a function

今天需要封装element中的Notification组件，按网上朋友们的教程，创建js文件，封装需要调用的方法，main.js中全局导出，然后在页面使用的时候一直会报下面这个错。

网上大多数说法是引入错误导致的，但是我尝试后并未解决。给大家分享下我的解决办法。

组件文件创建

名称        Notification.js

路径

js文件内部封装方法，使用的是notifyBox这个方法

        // 消息提示
        export const messageBox = (message, type, userHTML, showClose, duration) => {
            const msgInfo = message;

            const msgType = type || "warning"; //默认是warning(警告)    message(信息) success(成功) error(错误)

            const msgUserHTML = userHTML || false;

            const msgShowClose = showClose || false;

            const msgDuration = duration || 2000; //时间可以适当调整

            this.$message({
                message: msgInfo,

                type: msgType,

                dangerouslyUseHTMLString: msgUserHTML,

                showClose: msgShowClose,

                duration: msgDuration,
            });
        }

        //Notification通知
        export const notifyBox = (title, message, type, userHTML, showClose, duration,that) => {
            const msgInfo = message;//说明文字

            const titleInfo = title;//标题

            const msgType = type || "success"; //默认是warning(警告)    message(信息) success(成功) error(错误)

            const msgUserHTML = userHTML || false;//自定义html片段

            const msgShowClose = showClose || false;//是否隐藏关闭按钮

            const msgDuration = duration || 2000; //时间可以适当调整，设为 0 则不会自动关闭

            that.$notify({
                message: msgInfo,

                title: titleInfo,

                type: msgType,

                dangerouslyUseHTMLString: msgUserHTML,

                showClose: msgShowClose,

                duration: msgDuration,
            });
        }

        // 确认提示框
        export const confirmMessageBox = (message, title, confirType, msgUserHTML) => {
            return new Promise((resolve, reject) => {
                this.$confirm(message, title || "提示", {
                    confirmButtonText: "确认",

                    cancelButtonText: "取消",

                    dangerouslyUseHTMLString: msgUserHTML || false,

                    type: confirType || "warning", //默认是warning 警告
                })
                    .then(() => {
                        resolve();
                    })
                    .catch(() => {});
            });
        }

        //当前时间
        export const getTiemdata = (tieM) => {
            var boxDate = null;

            if (tieM !== undefined) {
                boxDate = tieM;
            } else {
                boxDate = new Date();
            }

            let d = new Date(boxDate);

            let year = d.getFullYear();

            let month =
                d.getMonth() + 1 < 10
                    ? "0" + (d.getMonth() + 1)
                    : d.getMonth() + 1;

            let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();

            let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();

            let min =
                d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();

            let sec =
                d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();

            const datatiem =
                year +
                "-" +
                month +
                "-" +
                day +
                " " +
                hours +
                ":" +
                min +
                ":" +
                sec;

            // console.log('全局',datatiem)

            return datatiem;
        }

        //导出
        export const exportExcelBox = (id, fixed, fixed_right, name) => {
            console.log(111);

            var wb = this.$XLSX.utils.table_to_book(
                document.querySelector(id),
                { raw: true }
            );

            var fix = document.querySelector(fixed);

            var fixright = document.querySelector(fixed_right);

            if (fix) {
                wb = this.$XLSX.utils.table_to_book(
                    document.querySelector(id).removeChild(fix),
                    { raw: true }
                );

                document.querySelector(id).appendChild(fix);
            }

            if (fixright) {
                wb = this.$XLSX.utils.table_to_book(
                    document.querySelector(id).removeChild(fixright),
                    { raw: true }
                );

                document.querySelector(id).appendChild(fixright);
            }

            var wbout = this.$XLSX.write(wb, {
                bookType: "xlsx",

                bookSST: true,

                type: "array",
            });

            try {
                this.$FileSaver.saveAs(
                    new Blob([wbout], { type: "application/octet-stream" }),

                    //设置导出文件名称

                    name + ".xlsx"
                );
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbout);
            }
        }

main.js中引入

页面中使用

注意：解决这个报错的方法就是在传参后面将当前页面的this以参数的形式传入，然后封装组件的时候用that接收即可

大家快去试试吧！