vue封装原生组件，使用方法

 

 

具体代码

messageBox.js

/*
 * 使用方法
 * @method this.messageBox(options)
 * @param {string} message 传入的提示文本
 * @param {string} type 提示的类型 confirm,alert
 * @param {function} callback 点击后返回的数据，确认返回confirm,取消返回cancel
 */

import Vue from 'vue'
import MessageBox from './messageBox.vue'
const MessageConstructor = Vue.extend(MessageBox)

let removeDom = event => {
  let child = document.querySelector('body')
  let childList = child.querySelectorAll('.message-outer')
  for (let i = 0; i < childList.length; i++) {
    // event.target.parentNode.parentNode.parentNode.removeChild(childList[i])
    child.removeChild(childList[i])
  }
}

MessageConstructor.prototype.msgclose = function (state) {
  this.visible = false
  removeDom()
  // this.$el.children[0].children[0].addEventListener('transitionend', removeDom)
  setTimeout(() => {
    if (this.callback) {
      this.callback(state)
    }
  }, 300)
}

const messageBox = (options = {}) => {
  var instance = new MessageConstructor().$mount(document.createElement('div'))
  instance.message = options.message
  instance.type = options.type
  if (instance.type === 'alert') {
    instance.showClose = false
  } else if (instance.type === 'confirm') {
    instance.showClose = true
  }
  instance.callback = options.callback
  document.body.appendChild(instance.$el)
  instance.visible = true
  return instance
}

export default messageBox

messageBox.vue

<template>
  <div class="message-outer" id="message-outer">
    <div class="message-inner">
      <transition name="fade">
        <div class="message-box" v-show="visible">
          <p class="message-title">{{message}}</p>
          <div class="msg-btn border-top">
            <span class="msg-close border-right" @click="msgclose('cancel')" v-if="showClose">取消</span>
            <span class="msg-ckeck" @click="msgclose('confirm')">确认</span>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'messageBox',
  data () {
    return {
      message: '确认执行此操作？',
      type: '',
      showClose: true,
      visible: false
    }
  }
}
</script>

<style scoped>
.message-outer{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: rgba(0,0,0,.5);
   z-index: 9999;
  }
.message-inner{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10000;
}
.message-box.fade-enter-active, .message-box.fade-leave-active{
  transition :.2s;
  transform:2s;
}
.message-box.fade-enter, .message-box.fade-leave-active{
  transform :translate(-50%,-50%);
  transform:  scale(0)
}
.message-box{
      width :80%;
      background: #ffffff;
      position: absolute;
      top: 40%;
      left: 0;
      right: 0;
      margin: auto;
      transform: translate(-50%,-50%) ;
      transform: scale(1);
      border-radius: .12rem;
      overflow: hidden;
}
 .message-title{
      width: 80%;
      padding: .6rem 10%;
      text-align: center;
      font-size: .32rem;
      color: #333;
      font-weight: 700;
      word-break: break-all;
 }
      .msg-btn{
        width: 100%;
        display: flex
      }
      .msg-btn span{
        display: block;
        width: 50%;
        line-height: .80rem;
        font-size: .30rem;
        color: #999;
        text-align: center;
      }
      .msg-btn span.msg-ckeck{
        flex: 1;
        color: #26a2ff !important;
      }
</style>