自定义 Notification 组件

github:https://github.com/volodyan/vue_mynotification

介绍

    Element UI Notification通知组件自定义的部分不能满足需要，Element的Notification通知组件
  只能在四个位置出现，分别是top-right/top-left/bottom-right/bottom-left，有些需求并不仅限这四个位置。还有要在该组件内部自定义
  js逻辑代码。所以lement UI Notification通知组件不能满足自定义需求。

实现需求

1.写组件

在用element的通知的时候，它是通过在body里面插入元素来实现的，但是我觉得一个个的有点散，所以用一个div来包裹住他们，这样一来还可以不用通过js来计算高度来实现排队，反而变得更加简单。通过timeout来记时，实现停留效果，监听timeFlag的变化来决定是否消失该条通知。注册方法的作用在下面详说。(src/components/MyNoticeComponent/index.js) (src/components/MyNoticeComponent/myNotify.vue)

myNotify.vue 文件

index.js

import vue from 'vue'
import myNotify from './myNotify.vue'

// 创建vue组件实例
const notify = vue.extend(myNotify);

//添加通知节点(用来存放通知的元素)
let notifyWrap = document.createElement('div');
notifyWrap.className = "notify-wrap"
    //notifyWrap.style = "position: fixed; right: 200px; top: 90px; transition-duration: .5s;"
document.body.appendChild(notifyWrap);



let myMsg = {
    /**
     * 通知框
     * @content 提示内容;
     * @type 提示框类型，parameter： success，error，warning
     * @time 显示时长
     */
    notify: ({
        content,
        type,
        time = 1500,
    }) => {
        //创建一个存放通知的div
        const notifyDom = new notify({
            el: document.createElement('div'),
            data() {
                return {
                    notifyFlag: true, // 是否显示
                    time: time, //取消按钮是否显示
                    content: content, // 文本内容
                    type: type, // 类型
                    timer: '',
                    timeFlag: false,

                }
            },
            watch: {
                timeFlag() {
                    if (this.timeFlag) {
                        this.notifyFlag = false;
                        window.clearTimeout(this.timer);
                    }
                }
            },
            created() {
                this.NowtimeSetintvalfun(); ///倒计时
                this.timer = setTimeout(() => {
                    this.timeFlag = true;
                }, this.time);

            },
            beforeDestroy() {
                window.clearTimeout(this.timer);
            }
        })

        //往notifyWrap里面添加通知
        notifyWrap.appendChild(notifyDom.$el);
    }
}

//注册
function register() {
    vue.prototype.$myMsg = myMsg
}

export default {
    myMsg,
    register
}

2.注册

进入main.js添加就可以了
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);


import MyNoticeComponent from "@/components/MyNoticeComponent/index" ///需要引入的部分

Vue.use(MyNoticeComponent.register) ///需要引入的部分
Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

3.调用

  this.$myMsg.notify({
              content: InitContent,
              type: "success",
              time: CutTime,
            });

4.借鉴

  1.https://blog.csdn.net/weixin_39394140/article/details/103768034
  2.https://blog.csdn.net/csu_passer/article/details/86477656