Vue独立组件开发：封装一个类似于ElementUI的消息提示组件

在 Vue 项目中，当我们做完某个动作，比如增删改查，都会给用户一个提示，告诉他刚才的操作是否成功，比如下面的组件：

这类组件不同于常规的组件，它组件结构本身很简单，但它是通过函数调用的方式展示的。

常见组件的使用方法都是在template模版中进行声明：

<template>
  <div>
    <Alert v-if="show">这是一条提示信息</Alert>
    <button @click="show = true">显示</button>
  </div>
</template>
<script>
  import Alert from '../component/alert.vue';
  export default {
    components: { Alert },
    data () {
      return {
        show: false
      }
    }
  }
</script>

但这样的用法有以下缺点：

• 每个使用的地方，都得注册组件；
• 需要预先将组件<Alert> 放置在模板中；
• 需要额外的 data 来控制组件 Alert 的显示状态；
• Alert的位置，是在当前组件位置，并非在 body 下，有可能会被其它组件遮挡。

总之，对使用者来说是很不友好的，那怎样才能优雅地实现这样一个组件呢？事实上，原生的 JavaScript 早已给出了答案：

// 全局提示
window.alert('这是一条提示信息');
// 二次确认
const confirm = window.confirm('确认删除吗？');
if (confirm) {
  // ok
} else {
  // cancel
}

所以，我们需要一个能用 JavaScript 调用组件的 API。

如果你使用过 ElementUI 之类的组件库，一定对它内置的 $Message、$Notice 等组件很熟悉，本文就来开发一个全局通知组件——$Alert。

模板结构

Alert 组件不同于常规的组件使用方式，它最终是通过 JS 来调用的，因此组件不用预留 props 和 events 接口。

<template>
  <div class="alert">
    <div class="alert-main" v-for="item in notices" :key="item.name">
      <div class="alert-content">{{ item.content }}</div>
    </div>
  </div>
</template>
<script>
let seed = 0

function getUuid() {
  return 'alert_' + seed++
}

export default {
  data() {
    return {
      notices: []
    }
  },
  methods: {
    add(notice) {
      const name = getUuid()

      let _notice = Object.assign(
        {
          name: name
        },
        notice
      )

      this.notices.push(_notice)

      // 定时移除，单位：秒
      const duration = notice.duration
      setTimeout(() => {
        this.remove(name)
      }, duration * 1000)
    },
    remove(name) {
      const notices = this.notices

      for (let i = 0; i < notices.length; i++) {
        if (notices[i].name === name) {
          this.notices.splice(i, 1)
          break
        }
      }
    }
  }
}
</script>
<style>
.alert {
  position: fixed;
  width: 100%;
  top: 16px;
  left: 0;
  text-align: center;
  pointer-events: none;
}
.alert-content {
  display: inline-block;
  padding: 8px 16px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  margin-bottom: 8px;
}
</style>

接下来，只要给数组 notices 增加数据，这个提示组件就能显示内容了。

我们先假设，最终会通过 JS 调用 Alert 的一个方法 add，并将 content 和 duration 传入进来，只要notices不为空，提示组件就会显示出来。

在 add 方法中，给每一条传进来的提示数据，加了一个不重复的 name 字段来标识，并通过 setTimeout 创建了一个计时器，当到达指定的 duration 持续时间后，调用 remove 方法，将对应 name 的那条提示信息找到，并从数组中移除。

为什么要这样写呢？

这是因为每次删除的时候并不是删除提示组件所有的dom结构，仅仅只是删除了dom结构里面的内容，这样每次调用的时候就不用把所有的结构都要重新创建一遍。

当我第一次调用的时候，会在 body 下生成如下 dom 结构：

一段时间之后，里面的 dom 就会被删除，但是外层的不会删除：

实例化

这一步，我们对 Alert 组件进一步封装，让它能够实例化，而不是常规的组件使用方法。

实例化组件可以使用 Vue.extend 或 new Vue，然后用 $mount 挂载到 body 节点下。

首先新建一个notification.js文件:

import Alert from './alert.vue';
import Vue from 'vue';

Alert.newInstance = properties => {
  // alert组件没有props属性，这里为空对象
  const props = properties || {};

  const Instance = new Vue({
    data: props,
    render (h) {
      return h(Alert, {
        props: props
      });
    }
  });
  // 上面仅仅是用new Vue创建了一个Vue实例，但是并没有挂载，也就没有生成dom节点
  // $mount()一般会传入'#app'，但是这里并没有传入，所以生成dom节点不知道挂载在那里，所以不会显示
  const component = Instance.$mount();
  // 把上一步生成的dom节点挂载到body节点下
  document.body.appendChild(component.$el);
  // 因为是通过h(Alert)渲染的，所以Alert是Vue实例下的一个子组件实例，所以需要用children来获取
  const alert = Instance.$children[0];

  return {
    add (noticeProps) {
      alert.add(noticeProps);
    },
    remove (name) {
      alert.remove(name);
    }
  }
};

export default Alert;

notification.js 并不是最终的文件，它只是对 alert.vue 添加了一个方法 newInstance。

现在提一个问题：alert.vue是一个单文件组件，并不是一个JS 对象，为什么能够给它扩展一个方法 newInstance 呢，即Alert.newInstance?

这是因为，alert.vue 会被 Webpack 的 vue-loader 编译，把 template 编译为 Render 函数，最终就会成为一个 JS 对象，自然可以对它进行扩展。

Instance是通过new Vue实例化得到的，在Vue的内部渲染了Alert组件，所以Alert组件实例就是Vue实例的children，因此需要通过 Instance.$children[0]来获取Alert实例。

在 newInstance 里，使用闭包暴露了两个方法 add 和 remove，这里的 add 和 remove 可不是 alert.vue 里的 add 和 remove，它们只是名字一样。

入口

最后要做的，就是调用 notification.js 创建实例，并通过 add 把数据传递过去，这是组件开发的最后一步，也是最终的入口。创建文件 alert.js：

import Notification from './notification.js'

let messageInstance

function getMessageInstance() {
  messageInstance = messageInstance || Notification.newInstance()
  return messageInstance
}

function notice({ duration = 1.5, content = '' }) {
  let instance = getMessageInstance()

  instance.add({
    content: content,
    duration: duration
  })
}

export default {
  info(options) {
    return notice(options)
  }
}

getMessageInstance 函数用来获取实例，它不会重复创建，如果 messageInstance 已经存在，就直接返回了，只在第一次调用 Notification 的 newInstance 时来创建实例。

alert.js 对外提供了一个方法 info，如果需要各种显示效果，比如成功的、失败的、警告的，可以在 info 下面提供更多的方法，比如 success、fail、warning 等，并传递不同参数让 Alert.vue 知道显示哪种状态的图标。

这里只有一个 info，事实上也可以省略掉，直接导出一个默认的函数，这样在调用时，就不用 this.$Alert.info() 了，直接 this.$Alert()。

来看一下显示一个信息提示组件的流程：

最后把 alert.js 作为插件注册到 Vue 里就行，在入口文件 src/main.js 中，通过 prototype 给 Vue 添加一个实例方法：

import Alert from '../src/components/alert/alert.js'

Vue.prototype.$Alert = Alert

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

这样在项目任何地方，都可以通过 this.$Alert 来调用 Alert 组件了。

需要注意的地方

1. Alert.vue 的最外层是有一个 .alert 节点的，它会在第一次调用 $Alert 时，在 body 下创建，因为不在 <router-view> 内，它不受路由的影响，也就是说一经创建，除非刷新页面，这个节点是不会消失的，所以在 alert.vue 的设计中，并没有主动销毁这个组件，而是维护了一个子节点数组 notices。

2. .alert 节点是 position: fixed 固定的，因此要合理设计它的 z-index，否则可能被其它节点遮挡。

3. 在 notification.js 的 new Vue 时，使用了 Render 函数来渲染 alert.vue，这是因为我们使用的是 template 在 runtime 的 Vue.js 版本，这个版本下是会报错的，如果你想用template模板，这需要使用runtime+compiler的Vue.js版本。另外，还有一个原因是如果这个组件用了template，那么在服务端渲染也会报错，所以这里只能用render的方式来渲染。

总结

Vue 的精髓是组件，组件的精髓是 JavaScript，将 JavaScript 开发中的技巧结合 Vue 组件，就能玩出不一样的东西。