新建文件夾 hlAlert
在hlAlert文件夾下新建組件模板的HlAlert.vue文件
在hlAlert文件夾下新建對(duì)應(yīng)組件模板的index.js文件

目錄結(jié)構(gòu)

<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 : '' // 一級(jí)標(biāo)題
  options['title'] = options.title ? options.title : '' // 彈窗頂部信息
  options['subMessage'] = options.subMessage ? options.subMessage : '' // 提示內(nèi)容
  options['isCloseIcon'] = options.isCloseIcon || false // 彈窗頂部關(guān)閉按鈕是否展示
  options['ensureBtnText'] = options.ensureBtnText ? options.ensureBtnText : '確認(rèn)' // 自定義確認(rèn)按鈕文字
  const MyHlAlert = Vue.extend(HlAlert)
  // 創(chuàng)建一個(gè)vue的實(shí)例
  const currentComponent = new MyHlAlert({
    data: options,
    methods: {
      ensureHanlder, // 確認(rèn)按鈕回調(diào)
      cancelHandler // 取消按鈕回調(diào)
    }
  }).$mount()
  document.querySelector('body').appendChild(currentComponent.$el)
}

export default HlAlert

install 方法步驟如下
① 使用vue.extend擴(kuò)展HlAlert.vue
② 創(chuàng)建一個(gè)vue的實(shí)例
創(chuàng)建vue實(shí)例時(shí)可以傳遞參數(shù)，用來和父組件進(jìn)行交互

③ 掛載到DOM節(jié)點(diǎn)上

去main.js里注冊(cè)好

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

組件的API如下：

使用的時(shí)候就可以用如下代碼：

this.$HlAlert({
  title: '信息提示',
  subMessage: '這是一個(gè)信息提示彈窗',
  ensureBtnText: '知道了',
  message: '你好',
  isCloseIcon: true
},
() => { console.log('確認(rèn)按鈕回調(diào)') ,
() => { console.log('取消按鈕回調(diào)')
})

點(diǎn)擊頁面上的彈窗按鈕后就可以看到提示該組件了

image.png