vue - 全局弹框组件实现1

想实现一个全局的弹窗组件Notice，以插件的形式使用，先来分析一波：

1. 首先得有一个Notice的组件配置，也就是Notice.vue文件。
2. 想把Notice这个组件挂载到body下，可以用render函数实现。
3. 全局引用，就可以使用啦！

首先，组件配置好写，就是一个框框组件配置，里面接受一些参数：弹框的主题title，弹框的展示的内容content，弹框的显示时间duration，再添加一些样式，就ok啦！
然后，重头来啦！使用render函数将这个组件挂载到body下面，可是vue的官网说，只能挂载一个呀，那怎么办呢(╥╯^╰╥)…，莫慌，只能挂载一个，那我就只挂载一个呗，然后把Notice组件通过render函数生成一个虚拟DOM，然后通过$mount方法将其生成真实的DOM，然后把这个DOMbody.appendChild()就可以啦！来走一波！
创建一个createNotice.js文件，内容如下：

import Vue from "vue";
const createNoticeByRender = function(Component, props) {
     
  // 创建一个实例：利用createElement，返回一个虚拟dom
  const vm = new Vue({
     
    render(h) {
     
      return h(Component, {
      props });
    }
  });
  // 通过挂载得到真实的dom
  vm.$mount();
  // 通过$el属性得到真实的dom
  document.body.appendChild(vm.$el);
  // 组件实例
  const comp = vm.$children[0];
  comp.remove = () => {
     
    document.body.removeChild(vm.$el);
    comp.$destroy();
  };
  // 返回组件的实例
  return comp;
};

export {
      createNoticeByRender };

来全局引入，在main.js中：

// 全局弹框组件引入
import {
      createNoticeByRender } from "./utils/createNotice.js";
Vue.prototype.$createNotice = createNoticeByRender;

在页面中使用：

import Notice from '@/Notice/index.vue'; // 引入组件配置
// 使用
this.$createNotice(Notice, {
     
    titile: '校验失败',
    message: '校验有误',
    duration: 1000
}).show()

就OK啦！
emmmm…好像忘了使用插件的形式，来啦！
在js文件中导出的时候，加上这个代码，当然要先引入Notice的组件配置文件：

export default {
     
  // 注册为一个插件
  install(Vue) {
     
    Vue.prototype.$notice = function(options) {
     
      return createNoticeByExtend(Notice, options);
    };
  }
};

引入：

// 作为一个插件引入全局弹框组件
import Notice from "./utils/createNotice";
Vue.use(Notice);

使用：

this.$notice({
     
    titile: '校验失败',
    message: '校验有误',
    duration: 1000
}).show()

收工啦！！O(∩_∩)O
代码地址
欢迎交流~~
by the way ~ 下一篇文章将使用Vue.extend方式实现全局弹窗组件，(#^.^#)…