Install

npm install @forzoom/vue-load;

Description

其中提供了一个插件，并且定义了一个指令，用来在加载图片时，对图片url进行操作。 大部分逻辑受到 vue-Lazyload 启发。

目前只试吃浏览器端，不支持SSR

插件配置

|key|type|default|description| |---|---|---|---| |directiveName|string | null|"load"|所生成指令名字| |filters|object|{}|图片文件过滤器|

插件参数

|key|type|default|description| |---|---|---|---| |style|string|null|将图片以形式设置为key为style的值|

例如:

v-load:background="xxx" // background: url(xxx)
v-load:background-image="xxx" // background-image: url(xxx)

过滤器函数

例子：

{
	addPostfix: function(listener, config) {
		// 在所有的图片url结尾添加`-120`
		listener.src += '-120';
	},
}

listener结构为 { el, src, }

key|description ---|--- el|图片DOM元素 src|图片链接

config结构为 { supportWebp }

key|description ---|--- supportWebp|浏览器是否支持webp

Usage

import Vue from 'vue';
import VueLoad from '@forzoom/vue-load';

Vue.use(VueLoad, {
	directiveName: 'my-load',
	filters: {
		addPostfix: function(listener, config) {
			// 在所有的图片url结尾添加`-120`
			listener.src += '-120';
		},
	},
});

<img />