Vue进阶（二）设计高级组件——自定义通知

阅读笔者的这一篇文章需要读者具有一定的Vue组件知识基础，如果本篇文章存在设计不合理或者知识错误的情况，还恳请指出修正。

1. 期望：

当我们需要向客户端提示一些信息时，我们希望这个提示能在页面的右下角显出，如果同时存在多个通知的时候，这些通知会自动向上叠，并且每个通知可以在一定时间后自动消失。
为了让这个通知组件可以在任意界面都能向用户提示一些内容，并且同时可以存在多个通知，那么，这个组件就不应该以标签的形式固定在某一个页面中（当然，如果你实在想这样做，也不是不能做到）。如果有用过jquery的经验，我们可能想到借助一个函数来动态生成这个组件，并将组件挂载到页面上。

按照以函数来生成一个组件的思想，设计一个组件我们有一下步骤：

1. 构建一个组件骨架，里面有该组件的不变属性，如字体大小。
2. 使用函数，根据使用情况来变动组件的属性，如组件的位置。

2. 构建Vue组件

notificationInit.vue:

<!--创建组件的骨架结构，包括组件中数据的声明-->
<template>
  <transition name="fade" @after-leave="afterLeave">
    <div
        class="notification"
        :style="style"
        v-show="visible"
        @mouseenter="clearTimer"
        @mouseleave="createTimer"
    >
      <span class="content">{
   {
   content}}</span>
      <a class="btn" @click="handleClick">{
   {
   btn}}</a>
    </div>
  </transition>
</template>

<script>
export default {
   
  name: "Notification",
  props: {
   
    content: {
   
      //通知的具体信息
      type: String,
      required: true
    },
    btn: {
   
      //用户的操作按钮提示文本，默认为“关闭”
      type: String,
      default: '关闭'
    },
    autoClose:{
   
      //是否启用自动关闭
      type: Boolean,
      default: true
    },
    autoCloseTime: {
   
      type: Number,
      default: 3000,
      validate(value){
   
        if (value < 0) return false
      }
    },
    response:{
   
      type: Function,
      default: null
    }
  },
  data () {
   
    return {
   
      visible: false,
      //verticalOffset,组件到底部的距离
      verticalOffset: 0,
      //当组件要被关闭时，记录组件之前占用的高度
      contentHeight: 0
    }
  },
  computed: {
   
    style() {
   
      return {
   
        position: 'fixed',
        right: '20px',
        bottom: `${
     this.verticalOffset}px`
      }
    }
  },
  methods: {
   
    createTimer() {
   
      //如果设置了自动关闭，则使用setTimeout来关闭
      //这个方法会在组件创建时和鼠标离开通知组件时调用
      if (this.autoClose){
   
        this.timer = setTimeout(() => {
   
          this.contentHeight = this.$el.offsetHeight
          this.visible = false
        }, this.autoCloseTime)
      }
    },
    clearTimer(){
   
      //当鼠标处于通知上方时，如果设置了自动关闭，则清除计时器
      if (this.timer){
   
        clearTimeout(this.timer)
      }
    },
    handleClick(e){
   
      //处理点击事件，并且隐藏通知组件，设置contentHeight
      e.preventDefault()
      if (this.response){
   
        this.response()
      }
      this.contentHeight = this.$el.offsetHeight
      this.visible = false
    },
    afterLeave () {
   
      //当transition的动画结束之后ÿ