vue构造器注册UI组件

import ConfirmComponent from '../../components/confirm/index'
import { mergeOptions } from '../pluginHelper'

function plugin (Vue) {
  if (plugin.install) {
    return
  }
  const Confirm = Vue.extend(ConfirmComponent)
  let $vm = new Confirm({
    el: document.createElement('div')
  })
  document.body.appendChild($vm.$el)
  const confirm = {
    show (options) {
      if ($vm.showValue) {
        return
      }
      if (typeof options === 'object') {
        mergeOptions($vm, options)
      }
      if (options && (options.onShow || options.onHide)) {
        this.watcher = $vm.$watch('showValue', (val) => {
          val && options.onShow && options.onShow($vm)
          if (val === false) {
            if (options.onHide) {
              options.onHide($vm)
            }
            this.watcher && this.watcher()
          }
        })
      }
      $vm.$off('on-cancel')
      $vm.$off('on-confirm')
      $vm.$on('on-cancel', () => {
        options && options.onCancel && options.onCancel()
      })
      $vm.$on('on-confirm', () => {
        options && options.onConfirm && options.onConfirm()
      })
      $vm.showValue = true
    },
    hide () {
      $vm.showValue = false
    }
  }
  if (!Vue.confirm) {
    Vue.confirm = confirm
  }
  Vue.mixin({
    created: function () {
      this.$confirm = Vue.confirm
    }
  })
}

export default plugin

pluginHelper

// merge
export const mergeOptions = function ($vm, options) {
  const defaults = {}
  for (let i in $vm.$options.props) {
    defaults[i] = $vm.$options.props[i].default
  }
  const _options = Object.assign({}, defaults, options)
  for (let i in _options) {
    $vm[i] = _options[i]
  }
}

export const initializeProps = function ($vm) {
  for (let i in $vm.$options.props) {
    $vm[i] = $vm.$options.props[i].default
  }
}

loading

<template>
  <div>
    <transition name="transition">
      <div class="loading" v-show="show">
        <div class="toast">
          <i class="icon"></i>
          <p class="text" v-if="text">{{text}}</p>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'loading',
    props: {
      show: Boolean,
      text: String
    }
  }
</script>

<style lang="scss" scoped>
  .loading {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    .toast {
      position: fixed;
      z-index: 5000;
       92px;
      min-height: 92px;
      top: 180px;
      left: 50%;
      margin-left: -46px;
      background: rgba(17, 17, 17, 0.7);
      text-align: center;
      border-radius: 5px;
      color: #FFFFFF;
    }

    .icon {
      margin: 27px 0 0;
       38px;
      height: 38px;
      display: inline-block;
      vertical-align: middle;
      -webkit-animation: loading 1s steps(12, end) infinite;
      animation: loading 1s steps(12, end) infinite;
      background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=") no-repeat;
      background-size: 100%;
    }

    .text {
      display: block;
      margin: 2px 0 15px;
      font-size: 12px;
    }
  }

  // 转
  @-webkit-keyframes loading {
    0% {
      transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
      transform: rotate3d(0, 0, 1, 360deg);
    }
  }

  @keyframes loading {
    0% {
      transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
      transform: rotate3d(0, 0, 1, 360deg);
    }
  }

  // 延时动画
  .transition-enter, .transition-leave-active {
    opacity: 0;
  }

  .transition-leave-active, .transition-enter-active {
    transition: opacity 300ms;
  }
</style>

pluginLoadind

import LoadingComponent from '../../components/loading/index'

function plugin (Vue) {
  if (plugin.install) {
    return
  }
  const Loading = Vue.extend(LoadingComponent)
  let $vm = new Loading({
    el: document.createElement('div')
  })
  document.body.appendChild($vm.$el)
  const loading = {
    show (options) {
      if ($vm.show) {
        return
      }
      $vm.text = $vm.$options.props.text.default
      if (typeof options === 'string') {
        $vm.text = options
      }
      $vm.show = true
    },
    hide () {
      $vm.show = false
    },
    isVisible () {
      return $vm.show
    }
  }
  if (!Vue.loading) {
    Vue.loading = loading
  }
  Vue.mixin({
    created: function () {
      this.$loading = Vue.loading
    }
  })
}

export default plugin

Vue.use() 挂载