vue实现全局组件----$alert

在element中，有一些全局的组件，类似于this.$message(),this.$toast()这种，通过原型的方式挂载在vue的全局上面，以供我们全局使用，平时自己用的多，那么我现在就尝试自己来实现一下。

一.普通组件方式
我们实现一个普通的提示框(Alert)组件不难，一般都是这样写:

这样的做法很简单粗暴，但是伴随着以下的问题:

• 每个使用组件的地方，都要注册组件。
• 需要预先把Alert组件放置于模板中。
• 需要通过额外的data来控制Alert显示状态。
  这对于使用者并不算友好。所以我们就需要进行改造。
  我们期望最终的使用方式是这样的:

methods: {
  handleShow () {
    this.$Alert({
      content: '这是一条提示信息',
      duration: 3
    })
  }
}

这样,this$alert()可以在任意的位置进行调用，无需单独引用。这个方法接受两个参数:

• content:提示内容
• duration:持续时间，单位为秒，默认为1.5秒

二.编写Alert组件

因为Alert组件是通过js来进行调用的，则不需要保留props和event,在上面只需要向添加notices增加数据，这个提示框就可以显示内容。注意:如果要给元素添加动画，则需满足以下条件:

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点
  3.实例化封装
  在src/components/alert/src目录下，新建notification.js

import Alert from './alert.vue';
import Vue from 'vue';
Alert.newInstance = properties => {
  const props = properties || {};
  const Instance = new Vue({
    data: props,
    render(h) {
      return h(Alert, {
        props: props
      })
    }
  })
  const component = Instance.$mount();
  document.body.appendChild(component.$el);
  const alert = Instance.$children[0]; // 找到alert实例目的是需要alert实例本身的add方法
  // console.log(alert);
  return {
    add(noticeProps) {
      alert.add(noticeProps);
    },
    remove(name) {
      alert.remove(name);
    }
  }
}
export default Alert;

它只是对 alert.vue 添加了一个方法 newInstance。虽然 alert.vue 包含了 template、script、style 三个标签，并不是一个 JS 对象，那怎么能够给它扩展一个方法 newInstance 呢？事实上，alert.vue 会被 Webpack 的 vue-loader 编译，把 template 编译为 Render 函数，最终就会成为一个 JS 对象，自然可以对它进行扩展。这里的 alert 就是 Render 的 Alert 组件实例。在 newInstance 里，使用闭包暴露了两个方法 add 和 remove。这里的 add 和 remove 可不是 alert.vue 里的 add 和 remove，它们只是名字一样。

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

import Notification from './notification.js';
let messageInstance;
function getMessageInstance() {
  messageInstance = messageInstance || Notification.newInstance(); // 确保一定能获取到alert实例
  return messageInstance;
}
function notice({ duration = 1.5, content = '', type = 'default' }) {
  let instance = getMessageInstance();
  // console.log(instance);
  instance.add({
    content: content,
    duration: duration,
    type: type
  });
}

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

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

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Alert from '../src/components/alert/alert.js'

Vue.config.productionTip = false

Vue.prototype.$Alert = Alert

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

这样在项目任何地方，都可以通过 this.$Alert 来调用 Alert 组件了，我们创建一个 alert 的路由，并在 src/views 下创建页面 alert.vue：

5.颜色样式

$primary-color:#5cadff;
$success-color:#19be6b;
$warn-color:#ff9900;
$info-color:#2db7f5;
$error-color:#ed4014;
$font-color:#333;