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;
       width: 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;
       width: 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() 挂载