vue.extend()实现全局动态组件

新建文件夹 hlAlert
在hlAlert文件夹下新建组件模板的HlAlert.vue文件
在hlAlert文件夹下新建对应组件模板的index.js文件

目录结构
HlAlert.vue文件写好组件的正常逻辑(样式没有贴进来)

<template>
  <div class="hl-pop-wrap">
    <div class="hl-pop-wrap-bg" @click="close(1)"></div>
    <div class="hl-pop-content">
      <div class="hl-alert-close" @click="close(1)" v-if="isCloseIcon">
        <i class="fa fa-times" aria-hidden="true"></i>
      </div>
      <div class="hl-pop-title" v-html="title" v-if="title"></div>
      <div class="hl-pop-detail">
        <div v-html="message" v-if="message" class="hl-pop-message"></div>
        <div v-html="subMessage" v-if="subMessage" class="hl-pop-submessage"></div>
      </div>
      <div class="hl-alert-btn-group">
        <button class="u-hl-base-btn u-alert-ensure" @click="ensure">{{ensureBtnText}}</button>
        <button class="u-hl-base-btn u-alert-close" @click="close(2)">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: '111'
    }
  },
  methods: {
    ensure () {
      this.ensureHanlder()
      this.$el.parentNode.removeChild(this.$el)
    },
    close (mode) {
      mode === 2 && this.cancelHandler()
      this.$el.parentNode.removeChild(this.$el)
    }
  }
}
</script>

index.js文件代码如下：

// index.js文件
import Vue from 'vue'
import HlAlert from './HlAlert'

HlAlert.install = function (options, ensureHanlder, cancelHandler) {
  if (!ensureHanlder) {
    ensureHanlder = function () {}
  }
  if (!cancelHandler) {
    cancelHandler = function () {}
  }
  // 定义data 
  if (!options) {
    options = {}
  }
  options['message'] = options.message ? options.message : '' // 一级标题
  options['title'] = options.title ? options.title : '' // 弹窗顶部信息
  options['subMessage'] = options.subMessage ? options.subMessage : '' // 提示内容
  options['isCloseIcon'] = options.isCloseIcon || false // 弹窗顶部关闭按钮是否展示
  options['ensureBtnText'] = options.ensureBtnText ? options.ensureBtnText : '确认' // 自定义确认按钮文字
  const MyHlAlert = Vue.extend(HlAlert)
  // 创建一个vue的实例
  const currentComponent = new MyHlAlert({
    data: options,
    methods: {
      ensureHanlder, // 确认按钮回调
      cancelHandler // 取消按钮回调
    }
  }).$mount()
  document.querySelector('body').appendChild(currentComponent.$el)
}

export default HlAlert

install 方法步骤如下
① 使用vue.extend扩展HlAlert.vue
② 创建一个vue的实例
创建vue实例时可以传递参数，用来和父组件进行交互

③ 挂载到DOM节点上

去main.js里注册好

import HlAlert from './components/hlAlert'
Vue.$HlAlert = Vue.prototype.$HlAlert = HlAlert.install

组件的API如下：

options组件属性	说明
title	弹窗顶部的内容
message	提示信息的一级标题，样式有加粗
subMessage	提示信息的内容
isCloseIcon	弹窗的关闭按钮是否展示。默认false
ensureBtnText	自定义弹窗确认按钮。默认“确认”

events	说明
第二个参数 ensureHanlder	确认按钮回调
第三个参数 cancelHandler	取消按钮回调

使用的时候就可以用如下代码：

this.$HlAlert({
  title: '信息提示',
  subMessage: '这是一个信息提示弹窗',
  ensureBtnText: '知道了',
  message: '你好',
  isCloseIcon: true
},
() => { console.log('确认按钮回调') ,
() => { console.log('取消按钮回调')
})

点击页面上的弹窗按钮后就可以看到提示该组件了

image.png