本文讲述如何使用Vue.extend()构造弹窗组件，并实现全局调用

点击这里查看，查看如何使用render(),构造一个弹窗组件

准备工作

在components文件夹下新建Tools文件夹用于存放所有的全局组件，Tools文件夹下新增Notice文件夹，并在其中新建Notice.vue和Notice.js

修改Notice.js

在Notice.js中添加如下代码

import Vue from 'vue';
import Notice from './Notice.vue';

// 获取组件构造器
const notice = Vue.extend(Notice);
let VM = ''; 
function AModal() {
  return function(type, props) {
    if (!props.text) return;
    if (!VM) {
      const oDiv = document.createElement('div');
      // 创建notice实例
      VM = new notice({ el: oDiv });
      // 并把实例化的模板插入body
      document.body.appendChild(VM.$el);
    }
    // 设置属性
    VM.type = type;
    VM.text = props.text;
    VM.timeout = !props.timeout&&props.timeout!=0?3000:props.timeout;
    VM.show = true;
    setTimeout(() => {
      VM.show = false;
    }, VM.timeout);
  };
}
let SHOW = AModal();
function warning(props) {
  SHOW('warning', props);
}
function info(props) {
  SHOW('info', props);
} 
function success(props) {
  SHOW('success',props);
}
function error(props) {
  SHOW('error', props);
}
export default {
  warning,
  success,
  info,
  error
};

编写弹窗组件

在Notice.vue中，添加如下代码

<template>
  <div v-if="show" class="box">
      <div :class="type">
        <strong>{{text}}</strong>
      </div>
  </div>
</template>

<script>
export default {
    props: ["show", "text", "type"],
}
</script>
<style>
.box {
  position: fixed;
  width: 100%;
  top: 16px;
  left: 0;
  text-align: center;
  pointer-events: none;
  border: grey 3px solid;
  box-sizing: border-box;
}
.success {
  background: #4caf50 !important;
}
.info {
  background: #2196f3 !important;
}
.warning {
  background: #ffc107 !important;
}
.error {
  background: #ff1744 !important;
}
</style>

注册全局组件

在main.js中，添加如下代码

import notice from './components/Tools/Notice/Notice'

Vue.prototype.$notice = notice

使用弹窗组件

在需要使用该组件的vue文件中

this.$notice.info({text:"Joker真帅",timeout:9999})
this.$notice.success({text:"Joker真帅"})

就可以尽情使用了