Vue v-lazy 转换

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

<img v-lazy="img">

<!-- 将转为 -->
<img :src="img">

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

<img v-lazy="img"> 

<!-- 将转为 -->
<img :src="getCompressUrl(img)">

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

<img v-lazy="img" size="50">

<!-- 将转为 -->
<img :src="getCompressUrl(img, 50, 50)">

以下几种size都是有效的：

<img v-lazy="src" size="50">
<img v-lazy="src" data-size="50">
<img v-lazy="src" width="50" height="100">
<img v-lazy="src" data-width="50" data-height="100">

如何使用

安装

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

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

const { LOADER as vLazy } = require('webpack-loader-v-lazy')';

module.export = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(vLazy)
      .loader(vLazy)
      .end();
  }
}

参数

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