vue.extend 自定义弹框

js

import Vue from 'vue'
import Toast from './Toast.vue'

const ToastBox = Vue.extend(Toast)

var instanceToast = ''

Toast.install = function (data) {
  if (!instanceToast) {
    instanceToast = new ToastBox({
      data
    }).$mount()
    document.body.appendChild(instanceToast.$el)
  }
  instanceToast.show = true
  instanceToast.title = data.title ? data.title : ''
  instanceToast.content = data.content ? data.content : ''
  instanceToast.type = data.type ? data.type : 'success'
}

export default Toast

vue

<template>
  <div v-show="show" class="myToast">
    <div class="mask" key="1" @click="show = false" @touchmove.prevent></div>
    <transition enter-active-class="animate__animated animate__fadeIn">
      <div v-show="show" class="pop" key="2">
        <div class="popTitle">
          <a-icon v-if="type == 'error'" class="toast-icon-error" type="close-circle" />
          <a-icon v-if="type == 'success'" class="toast-icon-success" type="check-circle" />
          <a-icon v-if="type == 'danger'" class="toast-icon-danger" type="exclamation-circle" />
          <p class="title-content">{{title}}</p>
          <a-icon @click="show = false" class="toast-close" type="close" />
        </div>
        <p class="toast-content">{{content}}</p>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'Toast',
  data() {
    return {
      show: false,
      title: '',
      content: '',
      type: 'success'
    }
  }
}
</script>
 <style lang="less" scoped>
.myToast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

// 全局弹窗
.mask {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
}

.pop {
  min-height: 120px;
  width: 380px;
  background: #fff;
  border-radius: 5px;
  z-index: 9;
  text-align: center;
  animation-duration: 0.75s;
  .popTitle {
    line-height: 40px;
    padding: 0px 20px;
    text-align: left;
    display: flex;
    align-items: center;
    height: 50px;
    .title-content {
      flex: 1;
      font-size: 16px;
      font-weight: 700;
      color: rgba(0, 0, 0, 0.85);
      margin: 0;
      margin-left: 20px;
      margin-right: 20px;
    }
    .toast-icon-error {
      color: #f5222d;
      font-size: 20px;
    }
    .toast-icon-success {
      color: #52c41a;
      font-size: 20px;
    }
    .toast-icon-danger {
      color: #faad14;
      font-size: 20px;
    }
    .toast-close {
      color: rgba(0, 0, 0, 0.45);
      cursor: pointer;
    }
  }
  .toast-content {
    padding: 0px 20px 0px 60px;
    text-align: left;
  }
}
</style>

main.js

import Toast from './components/Toast/index'
Vue.prototype.$Toast = Toast.install