# Vue v-lazy 转换

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

<img v-lazy="img">

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

如果提供 options.urlHandler,则用 urlHandler 包裹,比如:

<img v-lazy="img"> 

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

如果提供 sizeurlHandler,则向 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: 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;
};
Last Updated: 2024/10/12 08:54:40