Variable default(图片预加载组件)Const

Example

<template>
  <div id="app">
    <ImgPreload
      :imgs="preloadImgs"
      @finish="imgPreloadFinish"
      @error="imgPreloadError"
    >
      <template v-slot="{ loaded, total }">
        <div :style="`width: ${loaded / total * 100}%;`"></div>
      </template>
    </ImgPreload>
  </div>
</template>

<script>
  import ImgPreload from './dlf/vue/components/ImgPreload';
  const importAll = r => r.keys().map(r);
  // 生成 ./assets/imgs/ 下所有图片的路径数组，根据需要调整
  const preloadImgs = importAll(
    require.context('./assets/imgs/', true, /\.(jpg|png|gif)$/)
  );
  export default {
    name: 'app',
    components: {
      ImgPreload
    },
    computed: {
      preloadImgs() {
        return preloadImgs;
      }
    },
    methods: {
      imgPreloadFinish() {
        console.log('ok');
      },
      imgPreloadError(err) {
        console.log('err', err);
      }
    }
  };
</script>
Copy