@minix-iot/ui/dist/utils/extensions/vue.js

基于Vue的移动端轻量级UI组件库

import Vue from "vue";
export class VueExtension {
  static WithInstall(component, componentFunc) {
    if (typeof component !== 'object' && !component.name) {
      throw new Error('could not install,because it is not a vue component!');
    }
    component.install = function(vue) {
      vue.component(component.name, component);

      if (componentFunc) {
        vue.prototype[`$${component.name.replace('mx-','')}`] = componentFunc;
      }
    };
  }

  static SortChildren(children,parent){
    const { componentOptions } = parent.$vnode

    if(!componentOptions  || !componentOptions.children || !componentOptions.children.length){
      return
    }

    const vnodes = this.FlattenVNode(componentOptions.children)
    children.sort((a,b)=>vnodes.indexOf(a.$vnode) - vnodes.indexOf(b.$vnode))

    return children
  }

  static FlattenVNode(vnodes){
    return this.TraverseVNode(vnodes)
  }

  static TraverseVNode(vnodes){
    const res = []
    for (const vnode of vnodes) {
      res.push(vnode)

      if(vnode.componentInstance){
        res.push(...this.TraverseVNode(vnode.componentInstance.$children.map(x=>x.$vnode)))
      }

      if(vnode.children){
        res.push(...this.TraverseVNode(vnode.children))
      }
    }
    return res
  }

  static InvokeComponent(buildWrapperOptionsFunc, allowMultipleInstance = false){
    let queue = []

    const createInstance = ()=>{

      const unmount = ()=>{
        instance.$destroy()
        document.body.removeChild(instance.$el)
        queue = queue.filter(x=>x !== instance)
      }

      const options = buildWrapperOptionsFunc(unmount)
      const instance = new Vue(options)
      const root = document.createElement('div')
      document.body.appendChild(root)
      instance.$mount(root)

      return instance
    }

    const getIntance = ()=>{
      if(!queue.length || allowMultipleInstance){
        queue.push(createInstance())
      }
      return queue[queue.length - 1]
    }

    return invokeOptions=>{
      getIntance().open(invokeOptions)
    }
  }
}