nagq / chain-loading

chain-loading

按配置数组顺序加载组件, 直到加载成功

const load = name => ChainLoading({
  name,
  debug: true,
  loaders: [
    {
      loader: () => import(
        `@/components/level-2/${name}`
      ),
      path: `@/components/level-2/${name}`
    },
    {
      loader: () => import(
        `@/components/level-1/${name}`
      ),
      path: `@/components/level-1/${name}`
    },
    {
      loader: () => import(
        `@/components/${name.replace(name[0], name[0].toUpperCase())}`
      ),
      path: `@/components/${name.replace(name[0], name[0].toUpperCase())}`
    }
  ],
});

const Example = load(example);

<Example name="test"/>

options

debug

当debug为true时, 组件外层会添加一层div, 将name及加载组件的其它option作为data属性挂载在div上。

<div data-name="example" data-path="@/components/level-0/example-1">
    <div>
        <h1>level-0 Example-1, props name</h1>
        <button>submit</button>
    </div>
</div>