使用Api的形式封装Vue组件（一）

编写一个右下角弹出提示的vue插件，以api的形式调用。

从构建出基础代码，计算出显示的位置；添加自动消失；消失后删除dom，vm对象；生成多个，删除某个，重新计算位置；鼠标聚焦不关闭，移出重新开始自动消失。

一步一步完善，优化功能。

在文件夹notification下新增一个notification.vue文件 编写基础代码

<template>
  <transition name="fade">
    <div class="notification">
      <span class="container">{{content}}</span>
      <a class="btn" @click.stop.prevent="handleClose">{{btn}}</a>
    </div>
  </transition>
</template>
<script>
  export default {
    name: 'notification',
    props: {
      content: {
        type: String,
        require: true
      },
      btn: {
        type: String,
        default: '关闭'
      }
    },
    methods: {
      handleClose (e) {
        this.$emit('close')
      }
    }
  }
</script>

在同级目录下新建index.js

import Notification from './notification.vue'
export default (Vue) => {
  Vue.component(Notification.name, Notification)
}

在vue入口文件的index.js增加

import Notification from './components/notification'
Vue.use(Notification)

之后在页面的vue文件中增加

<notification content="test notification"></notification>

至此 组件初步搭建完成