转换 v-lazy

替换 Vue 模板中的v-lazy，比如

1<img v-lazy="img">
2
3<!-- 将转为 -->
4<img :src="img">

如果提供 options.urlHandler，则用 urlHandler 包裹，比如：

1<img v-lazy="img"> 
2
3<!-- 将转为 -->
4<img :src="getCompressUrl(img)">

如果提供 size 和 urlHandler，则向 urlHandler 传递 size 参数，比如：

1<img v-lazy="img" size="50">
2
3<!-- 将转为 -->
4<img :src="getCompressUrl(img, 50, 50)">

以下几种size都是有效的：

1<img v-lazy="src" size="50">
2<img v-lazy="src" data-size="50">
3<img v-lazy="src" width="50" height="100">
4<img v-lazy="src" data-width="50" data-height="100">

如何使用

安装

1pnpm add @plugin-light/webpack-loader-v-lazy -D

在 vue.config.js 中添加如下设置：

1const { LOADER: vLazy } = require('@plugin-light/webpack-loader-v-lazy');
2
3module.export = {
4  chainWebpack(config) {
5    config.module
6      .rule('vue')
7      .test(/\.vue$/)
8      .use(vLazy)
9      .loader(vLazy)
10      .end();
11  }
12}

参数

1export type IVLazyOptions = {
2  // 图片处理方法名
3  urlHandler?: string;
4};

更新日志

点此查看