vue图片预加载组件(用于cli中)

用于浏览器预渲染图片，本组件提供一个插槽

• main.js

import imgsLoader from "imgsloader";
Vue.use(imgsLoader);

• vue.config.js

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@compoImg',resolve('src/components/img'))
      // 这里对应图片的存放位置，组件将从这个位置读取数组中包含的图片（可修改），别名只能用@compoImg
      //注意该文件夹必须存在
  }
}

• 使用

<imgsLoader @finished="fn" :config="loadConifg">
  <div>
    加载中...
  </div>
</imgsLoader>

export default {
  ...
  computed: {
    loadConifg() {
      return {
        imgList: [
          'img-1.jpg',
          'img-2.jpg',
          'img-3.jpg',
          'img-4.jpg',
          'img-5.jpg',
          'img-6.jpg'
        ],
        timeOut: 30000
      }
    }
  },
  methods:{
    fn(list) {//list为被处理后的图片数组，对应打包后的图片
      //这里可以做预加载完图片之后的处理
    }
  }
}