用于浏览器预渲染图片,本组件提供一个插槽
- 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为被处理后的图片数组,对应打包后的图片
//这里可以做预加载完图片之后的处理
}
}
}