詳解Vue全局組件的掛載之實現彈窗組件

<template>
  <div v-if="showMsgBox" class="mag-box">
      <transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutUp">
        <div class="mask-div">
          <div class="msg-tip">
            <div class="msg-title">
              <p>提示</p>
            </div>
            <div class="msg-content">
              {{ msgTip }}
            </div>
            <div class="msg-btn-group flex-end">
              <div v-show="msgType === 1" class="msg-btn cancle-btn" @click="cancleMsg">
                <p>取消</p>
              </div>
              <div v-show="msgType < 2" class="msg-btn confirm-btn" @click="confirmMsg">
                <p>確定</p>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>

</template>

<script>
export default {
  name: 'MsgBox',
  data() {
    return {
      msgTip: '',
      showMsgBox: false,
      msgType: '', // 0 隻顯示確定  1 確定 取消  2 都不顯示  3整個組件不顯示
      success: '',
      cancle: ''
    }
  },
  methods: {
    open({ msgTip, msgType = 1, success, cancle }) {
      this.showMsgBox = true
      this.msgType = msgType
      this.msgTip = msgTip
      this.success = success
      this.cancle = cancle
    },
    confirmMsg() {
      this.showMsgBox = false
      this.success()
      // 組件關閉後銷毀該組件
      this.remove()
    },
    cancleMsg() {
      this.showMsgBox = false
      this.cancle()
      this.remove()
    }
  }
}
</script>
<style scoped lang="less">
    .mask-div {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 5000;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(32,42,59,0.5);
    }
    .msg-tip {
        width:378px;
        height:145px;
        box-shadow:0 3px 6px rgba(0,0,0,0.16);
        background: #ffffff;
        border-radius:4px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 9999;
    }
    .msg-title {
        width: 100%;
        height:36px;
        background-color:#1f95ee;
        border-radius:4px 4px 0 0;
        p {
            color: #ffffff;
            font-size: 16px;
            line-height: 36px;
            text-align: center;
        }
    }
    .msg-content {
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
    }
    .msg-btn-group {
        position: absolute;
        bottom: 20px;
        right: 20px;
        .msg-btn {
            padding: 6px 10px;
            cursor: pointer;
            border-radius: 4px;
            p {
                font-size: 12px;
                border-radius: 4px;
            }
        }
        .cancle-btn {
            background: #fff;
            border: 1px solid #dcdfe6;
            color: #606266;
        }
        .confirm-btn {
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
            margin-left: 10px;
        }
    }
</style>

// 導入msgBox的vue文件
import msgBox from './msgBox'

const msgBox = {
  install: function(Vue) {
    // 組件註冊
    const Msg = Vue.extend(msgBox)
    const msg = new Msg()

    // 掛載
    // 此處展示瞭兩個盒子，是因為vue.extend方法掛載會覆蓋原有的dom元素，銷毀後便無法再次掛載
    document.body.innerHTML += '<div id="msg"><div id="msg"></div></div>'
    msg.$mount('#msg')
    // 全局註冊
    Vue.prototype.$msgBoxInfo = function(options) {
    // 打開彈窗觸發的方法
      msg.open(options)
      // 彈窗關閉後銷毀組件
      msg.remove = function() {
        const msgDom = document.getElementById('msg')
        document.body.removeChild(msgDom)
        msg.$destroy()
      }
      return msg
    }
  }
}
export default msgBox

// 此處根據實際路徑引入
import msgBoxfrom './msgBox'
Vue.use(msgBox)

this.$msgBoxInfo({
          msgTip: '這是新的msgbox',
          success: () => {
            alert('成功狀態的msgbox')
          },
          cancle:() => {
            alert('取消狀態的msgbox')
          }
        })

<template>
  <div class="box">
    <h3>{{ title }}</h3>
    <div class="box-content">{{ message }}</div>
  </div>
</template>
<script>
export default {
  name: 'Notice',
  props: {
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    },
    duration: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      iShow: false
    }
  },
  methods: {
    show() {
      this.iShow = true
      setTimeout(this.hide, this.duration)
    },
    hide() {
      this.iShow = false
      this.remove()
    }
  }
}
</script>
<style scoped>
    .box {
        position: fixed;
        width: 300px;
        top: 100px;
        right: 0;
        text-align: center;
        pointer-events: none;
        background-color: #fff;
        border: grey 3px solid;
        box-sizing: border-box;
    }
    .box-content {
        width: 200px;
        margin: 10px auto;
        font-size: 14px;
        padding: 8px 16px;
        background: #fff;
        border-radius: 3px;
        margin-bottom: 8px;
    }
</style>

import Vue from 'vue'
function notice(Component, props) {
  const vm = new Vue({
    render: h => h(Component, { props })
  }).$mount()
  document.body.appendChild(vm.$el)
  const comp = vm.$children[0]
  // 需要對掛載的組件進行刪除
  comp.remove = function() {
    document.body.removeChild(vm.$el)
    vm.$destroy()
  }
  return comp
}
export default notice

import create from './notice'
Vue.prototype.$create = create

import Notice from '../Notice'
// 此處的notice組件需要引入
this.$create(Notice, {
            title: '自己封裝彈窗',
            message: '你好，這是自己寫的彈窗',
            duration: 1000
          }).show()