Loading

loading 组件，用于加载资源，App.vue 默认引用。

使用

<Loading :assets="loadAssets" @loaded="loadingLoaded"></Loading>

import { Loading } from '@go/ui';
// 需要加载的图片资源
// vite2
const loadAssets = import.meta.globEager('./assets/**/*.(png|jpg)');
// vite3
const loadAssets = import.meta.glob('./assets/**/*.(png|jpg)', { eager: true });

export default defineComponent({
  data(){
    return {
      loadAssets: loadAssets,
    }
  },
  components: {
    Loading,
  },
  methods:{
    loadingLoaded(assets){
      // 资源加载完成后的回调
      // assets:{[key:string]:HTMLImageElement})
    },
  }
})

修改 CSS 样式

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

自定义 loading 样式

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

懒加载（按需加载）

import { imageLoad } from "@go/ui";

const assets  = []; // 需要加载的图片资源，支持字符串、数组，与 Vite glob 导入的对象

imageLoad(assets, {
  onInit: (e)=>{
    console.log(e.total); // 资源总数
  },
  onProgress: (e)=>{
    // 单张资源加载完成的回调
  },
  onComplete: (e)=>{
    console.log(e.loadedImagesData); // 加载完成的资源信息
  }
});

获取变量类型

import { getValueType } from "@go/ui";

getValueType(0); // number
getValueType("0"); // string

Loading #

使用 #

修改 CSS 样式 #

自定义 loading 样式 #

懒加载（按需加载） #

获取变量类型 #

Loading

使用

修改 CSS 样式

自定义 loading 样式

懒加载（按需加载）

获取变量类型