PixiLoading

在 Loading 组件的基础上，增加了 PixiJs 资源的加载。

安装

$ npm install pixi.js -S

使用

<PixiLoading v-if="pageIndex === -1" :assets="loadAssets" :pixiAssets="pixiAssets" :PIXI="PIXI" @loaded="loadingLoaded" ></PixiLoading>

import { PixiLoading } from '@go/ui';
import * as PIXI from 'pixi.js';
// 为了避免重复加载，建议将 pixi 资源与非 pixi 资源放置在不同文件夹 
// vite2
const loadAssets = import.meta.globEager('./assets/dom/**/*.(png|jpg)');
const pixiAssets = import.meta.globEager('./assets/pixi/**/*.(png|jpg)');
// vite3
const loadAssets = import.meta.glob(['@assets/**/*.(png|jpg)', '!@assets/not_load/**/*', '!@assets/pixi/**/*'],{ eager: true });
const pixiAssets = import.meta.glob('@assets/pixi/**/*.(png|jpg)', { eager: true });

export default defineComponent({
  data(){
    return {
      loadAssets: loadAssets,
      pixiAssets: pixiAssets,
      PIXI: PIXI,
    }
  },
  components: {
    PixiLoading,
  },
  methods:{
    loadingLoaded(assets){
      // 资源加载完成后的回调
      // PIXI.Loader.shared.resources
    },
  }
})

修改 CSS 样式

:deep(.app-loading){
  .loading-num{
    color: #000;
  }
}

自定义 loading 样式

<PixiLoading :assets="loadAssets" :pixiAssets="pixiAssets" :PIXI="PIXI" @loaded="loadingLoaded" v-slot="{progress}">
  <div class="process">{{progress}}%</div>
</PixiLoading>

PixiLoading #

安装 #

使用 #

修改 CSS 样式 #

自定义 loading 样式 #

PixiLoading

安装

使用

修改 CSS 样式

自定义 loading 样式