关于前端:Element-2-组件源码剖析之Notification通知

告诉组件Notification 罕用于全局展现告诉揭示信息。本文将剖析其源码实现，急躁读完，置信会对您有所帮忙。🔗 组件文档 Notification 🔗 gitee 源码

更多组件分析详见 👉 📚 Element 2 源码分析组件总览。

Notification 在性能配置以及源码实现上与 Message 十分相似，所以局部反复内容本文将不做详尽解释。为了更好了解，请先浏览 Message 组件实现、Message 服务实现。

Message 罕用于被动操作后的反馈提醒，

可提供胜利、正告和谬误等反馈信息。
顶部居中显示并主动隐没，是一种不打断用户操作的轻量级提醒形式。

Notification 罕用于显示全局的告诉揭示音讯。

较为简单的告诉内容。
零碎被动推送。
悬浮呈现在页面角落。

跟 Message 组件一样，Notification以服务的形式调用。调用办法为 Notification(options), 组件为每个 type 定义了各自的办法，如 Notification.success(options)，并且能够调用 Notification.closeAll() 手动敞开所有实例。

options 参数配置项，在此不做详尽解释, 详见组件文档 Notification#options。

当组件库残缺引入，间接应用this.$notify(options)。

// packages\notification\index.js
import Notification from './src/main.js';
export default Notification;

// src/index.js
const install = function(Vue, opts = {}) {Vue.prototype.$notify = Notification;};

// 残缺引入
this.$notify(options);

// 独自援用
import {Notification} from 'element-ui'; 
Notification(options);

组件 Notification 的 DOM 层次结构跟 Alert十分相似。

<transition name="el-notification-fade">
  <!-- 组件根节点 -->
  <div class="el-notification">
    <!-- icon 图标 -->
    <i class="el-notification__icon"></i>
    <!-- 文字内容区域 -->
    <div class="el-notification__group">
      <!-- 题目 -->
      <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"></div>
    </div>
  </div>
</transition>

类名为 el-notification 的<div> 元素根节点 1️⃣，应用 transition 实现过渡成果，蕴含两个子节点：

2️⃣左侧的图标。
3️⃣右侧的文字内容区域。
- 4️⃣ 题目
- 5️⃣ 阐明文字
- 6️⃣ 敞开按钮（定位应用相对布局）

下图为组件 Alert 的 DOM 层次结构，十分类似。具体能够浏览前文源码分析之 Alert。

事件监听器。它能够是 transitionend 或 animationend

notification 性能实现跟 message相似，接下来次要阐明下不同之处，类似代码将省略。

// packages\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" 
    >
      // 省略...
    </div>
  </transition>
</template>
<script type="text/babel">
  export default {data() {
      return {
        // ... 
        title: '', // 题目
        position: 'top-right' // 自定义弹出地位
      };
    },
    computed: {// typeClass() 图标类名 
      // horizontalClass() 依据 position 断定程度方向属性 
      // verticalProperty() 依据 position 断定垂直方向属性 
      // positionStyle()},
    watch: {// closed()
    },
    methods: {// destroyElement()
      // click() 点击回调事件 
      // close()  
      // clearTimer()  
      // startTimer()  
      // keydown 
    },
    mounted() {
      // startTimer
      // add keydown Listener
    },
    beforeDestroy() {// remove keydown Listener}
  };
</script>

跟 message 组件一样，当被挂载之后调用办法 startTimer 启用定时器，实现实例的主动敞开。挂载之后增加 keydown 事件监听。实例销毁之前, 会移除 keydown 事件监听。

根节点不仅绑定 mouseenter、mouseleave 事件，也绑定了 click 事件，用于点击实例时调用传入的回调函数。

click() {if (typeof this.onClick === 'function') {this.onClick();
  }
},

组件 transition 没有绑定 after-leave 钩子函数，而是在侦听器中增加了 transitionend 事件监听，调用办法 destroyElement 用于组件敞开后的销毁工作。

// watch  侦听
closed(newVal) {if (newVal) {
    this.visible = false;
    this.$el.addEventListener('transitionend', this.destroyElement); // 增加过渡成果事件监听
  }
}

// methods
destroyElement() {this.$el.removeEventListener('transitionend', this.destroyElement); // 移除过渡成果事件监听
  // vm destroy  &&  remove el 
},

办法 keydown不仅实现按 ESC 键敞开音讯组件，同时反对按 backspace detele 键取革除定时器，按其余键复原计时器。

keydown(e) {
  // 8 backspace 46 detele 革除定时器
  if (e.keyCode === 46 || e.keyCode === 8) {this.clearTimer(); 
  } else if (e.keyCode === 27) { // esc 敞开音讯
    if (!this.closed) {this.close();
    }
  } else {this.startTimer(); // 复原计时器
  }
}

属性 position 定义实例的弹出地位，反对四个选项：top-right、top-left、bottom-right、bottom-left，默认为top-right。

组件应用相对定位，依据属性 position 值断定高低、左右边界偏移属性。

计算属性 verticalProperty 用于断定高低偏移属性应用 top 或 bottom；计算属性positionStyle 基于 verticalProperty 值生成内联款式 top/bottom:20px。

verticalProperty() {return /^top-/.test(this.position) ? 'top' : 'bottom';
}, 
positionStyle() {
  return {[this.verticalProperty]: `${this.verticalOffset}px`
  };
}

左右偏移应用计算属性horizontalClass 生成类名right 或left。

horizontalClass() {return this.position.indexOf('right') > -1 ? 'right' : 'left';
},

相干款式定义：

.el-notification.right {right: 16px} 
.el-notification.left {left: 16px}

Notification 在源码实现上与 Message 十分相似，具体的性能流程解说请浏览前文 Message 服务实现，此处不在过多赘述。

源码精简后构造如下，代码创立了 function 类型的对象Notification，同时给对象增加属性办法 close、closeAll、warning、info、error，导出对象 Notification。

// packages\notification\src\main.js
const NotificationConstructor = Vue.extend(Main); // 组件结构器  
let instance; // 组件实例 
let instances = []; // 存储所有组件实例数组
let seed = 1; // 用于递增计数 

const Notification = function(options) {// 逻辑 ...};

['success', 'warning', 'info', 'error'].forEach(type => {// 逻辑 ...});

Notification.close = function(id, userOnClose) {// 逻辑 ...};

Notification.closeAll = function() {// 逻辑 ...};

export default Notification;

Notification反对自定义弹出地位，能够从屏幕四角中的任意一角弹出，然而所有实例都在保留在同一数组中，在款式计算的过程中，新增了逻辑辨别地位雷同的元素。

函数 Notification 中，依据属性 position 过滤元素个数，进行偏移量计算。即便未设置 offset 值，组件默认偏移量为 16。

const Notification = function(options) {
  // ...
  const position = options.position || 'top-right';  
  // ...
  let verticalOffset = options.offset || 0;
  instances.filter(item => item.position === position).forEach(item => {verticalOffset += item.$el.offsetHeight + 16;});
  verticalOffset += 16; 
  instance.verticalOffset = verticalOffset;
  // ...
};

函数 close 中，当删除实例后，从新计算只须要调整索引值大于以后实例 index 的偏移量，依据属性 position 过滤元素，同时依据计算属性 verticalProperty 更新 DOM 元素款式。

Notification.close = function(id, userOnClose) {
  // ...
  
  // 数据更新后 偏移量计算
  const position = instance.position;
  const removedHeight = instance.dom.offsetHeight;
  for (let i = index; i < len - 1; i++) {if (instances[i].position === position) {instances[i].dom.style[instance.verticalProperty] =
        parseInt(instances[i].dom.style[instance.verticalProperty], 10) - removedHeight - 16 + 'px';
    }
  }
};

// 计算属性
verticalProperty() {return /^top-/.test(this.position) ? 'top' : 'bottom';
},

组件款式源码 packages\theme-chalk\src\notification.scss 应用混合指令 b、when、m、e 嵌套生成组件款式。

// 生成 .el-notification
@include b(notification) {
  // ...
  
  // 生成 .el-notification.right
  &.right {// ...}
  // 生成 .el-notification.left
  &.left {// ...}
  // 生成 .el-notification__group
  @include e(group) {// ...}
  // 生成 .el-notification__title
  @include e(title) {// ...}
  // 生成 .el-notification__content
  @include e(content) {
    // ...
    
    // 生成 .el-notification__content p
    p {// ...}
  }
  // 生成 .el-notification__icon
  @include e(icon) {// ...}
  // 生成 .el-notification__closeBtn
  @include e(closeBtn) {
    // ...
    
    // 生成 .el-notification__closeBtn:hover
    &:hover {// ...}
  }
  // 生成 .el-notification .el-icon-success/error/info/warning
  .el-icon-success {// color ...}
  // error/info/warning
}

.el-notification-fade-enter {
  // 生成 .el-notification-fade-enter.right
  &.right {// ...}
  // 生成 .el-notification-fade-enter.left
  &.left {// ...}
}

// 生成 .el-notification-fade-leave-active 
.el-notification-fade-leave-active {// ...}

如果本文对您有所帮忙请关注➕、点赞👍、珍藏⭐！您的认可就是对我的最大反对！

此文章已收录到专栏中 👇，能够间接关注。

关于前端:Element-2-组件源码剖析之Notification通知

简介

Notification vs Message

悬浮呈现在页面角落。

应用形式

组件源码

DOM 构造

组件性能

生命周期 & 事件

地位偏移

服务实现

款式实现

关注专栏