index.js
import Notification from './src/main.js'; export default Notification;
src/main.js
import Vue from 'vue'; import Main from './main.vue'; import { PopupManager } from 'element-ui/src/utils/popup'; import { isVNode } from 'element-ui/src/utils/vdom'; const NotificationConstructor = Vue.extend(Main); let instance; let instances = []; let seed = 1; const Notification = function (options) { if (Vue.prototype.$isServer) return; options = options || {}; // 自定义关闭 const userOnClose = options.onClose; const id = 'notification_' + seed++; // 位置 const position = options.position || 'top-right'; // 关闭事件 options.onClose = function () { Notification.close(id, userOnClose); }; // 创建notification实例 instance = new NotificationConstructor({ data: options }); if (isVNode(options.message)) { instance.$slots.default = [options.message]; options.message = 'REPLACED_BY_VNODE'; } instance.id = id; // 挂载 instance.$mount(); // 添加到body document.body.appendChild(instance.$el); // 显示 instance.visible = true; // 设置dom instance.dom = instance.$el; // 设置z-index instance.dom.style.zIndex = PopupManager.nextZIndex(); // 偏移量 let verticalOffset = options.offset || 0; // 过滤查找,相同位置的notification,每次增加(自身高度+16),避免覆盖 instances.filter(item => item.position === position).forEach(item => { verticalOffset += item.$el.offsetHeight + 16; }); // 最后一个也加16 verticalOffset += 16; // 设置为当前的偏移量 instance.verticalOffset = verticalOffset; // 放入数组 instances.push(instance); // 返回 return instance; }; // 循环类型为这4个中类型 ['success', 'warning', 'info', 'error'].forEach(type => { // 给Notification增加这几种类型函数 Notification[type] = options => { // 如果是字符串,转变为对象 if (typeof options === 'string' || isVNode(options)) { options = { message: options }; } // 设置type类型 options.type = type; return Notification(options); }; }); // 关闭 Notification.close = function (id, userOnClose) { let index = -1; const len = instances.length; // 过滤,查找id const instance = instances.filter((instance, i) => { if (instance.id === id) { index = i; return true; } return false; })[0]; // 不存在,返回 if (!instance) return; // 找到后有自定义关闭,执行 if (typeof userOnClose === 'function') { userOnClose(instance); } // 删除 instances.splice(index, 1); if (len <= 1) return; // 记录instance位置 const position = instance.position; // 记录instance高度 const removedHeight = instance.dom.offsetHeight; // 循环查找位置 for (let i = index; i < len - 1; i++) { if (instances[i].position === position) { // 对应的位置减去(本身高度+16) instances[i].dom.style[instance.verticalProperty] = parseInt(instances[i].dom.style[instance.verticalProperty], 10) - removedHeight - 16 + 'px'; } } }; // 全部关闭 Notification.closeAll = function () { for (let i = instances.length - 1; i >= 0; i--) { instances[i].close(); } }; export default Notification;
src/main.vue
<template> <transition name="el-notification-fade"> <div :class="['el-notification', customClass, horizontalClass]" v-show="visible" :style="positionStyle" @mouseenter="clearTimer()" @mouseleave="startTimer()" @click="click" role="alert" > <i class="el-notification__icon" :class="[ typeClass, iconClass ]" v-if="type || iconClass"> </i> <div class="el-notification__group" :class="{ 'is-with-icon': typeClass || iconClass }"> <h2 class="el-notification__title" v-text="title"></h2> <div class="el-notification__content" v-show="message"> <slot> <p v-if="!dangerouslyUseHTMLString">{{ message }}</p> <p v-else v-html="message"></p> </slot> </div> <div class="el-notification__closeBtn el-icon-close" v-if="showClose" @click.stop="close"></div> </div> </div> </transition> </template> <script type="text/babel"> let typeMap = { success: 'success', info: 'info', warning: 'warning', error: 'error' }; export default { data() { return { visible: false,//是否显示 title: '',// 标题 message: '',//说明文字 duration: 4500,//显示时间, 毫秒。设为 0 则不会自动关闭 type: '',// 主题样式，如果不在可选值内将被忽略 showClose: true,//是否显示关闭按钮 customClass: '',//自定义类名 iconClass: '',//自定义图标的类名。若设置了 type，则 iconClass 会被覆盖 onClose: null,//关闭时的回调函数 onClick: null,//点击 Notification 时的回调函数 closed: false,//是否关闭 verticalOffset: 0,//偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 timer: null,//定时器 dangerouslyUseHTMLString: false,//是否将 message 属性作为 HTML 片段处理 position: 'top-right'//位置 }; }, computed: { // type类 typeClass() { return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : ''; }, // 水平方向上的类 horizontalClass() { return this.position.indexOf('right') > -1 ? 'right' : 'left'; }, // 垂直方向上的类名 verticalProperty() { return /^top-/.test(this.position) ? 'top' : 'bottom'; }, // 上下的偏移量 positionStyle() { return { [this.verticalProperty]: `${ this.verticalOffset }px` }; } }, watch: { // 监听是否关闭 closed(newVal) { // 关闭 if (newVal) { this.visible = false; // 添加transitionend事件 this.$el.addEventListener('transitionend', this.destroyElement); } } }, methods: { destroyElement() { // 移除transitionend事件 this.$el.removeEventListener('transitionend', this.destroyElement); this.$destroy(true); this.$el.parentNode.removeChild(this.$el); }, // 点击事件 click() { // 如果设置了点击的回调,则执行 if (typeof this.onClick === 'function') { this.onClick(); } }, // 关闭事件 close() { this.closed = true; // 如果设置了点击关闭的回调,则执行 if (typeof this.onClose === 'function') { this.onClose(); } }, // 清除定时器 clearTimer() { clearTimeout(this.timer); }, // 开启定时器 startTimer() { if (this.duration > 0) { this.timer = setTimeout(() => { if (!this.closed) { this.close(); } }, this.duration); } }, // 键盘按下事件 keydown(e) { if (e.keyCode === 46 || e.keyCode === 8) { this.clearTimer(); // detele 取消倒计时 } else if (e.keyCode === 27) { // esc关闭消息 if (!this.closed) { this.close(); } } else { this.startTimer(); // 恢复倒计时 } } }, mounted() { // 默认开启定时器 if (this.duration > 0) { this.timer = setTimeout(() => { if (!this.closed) { this.close(); } }, this.duration); } // 增加监听 document.addEventListener('keydown', this.keydown); }, beforeDestroy() { // 移除 document.removeEventListener('keydown', this.keydown); } }; </script>