@forzoom/vue-load
``` npm install @forzoom/vue-load; ```
Last updated 2 years ago by forzoom .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @forzoom/vue-load 
SYNC missed versions from official npm registry.

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 将图片以<image>形式设置为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 />

Current Tags

  • 0.0.1                                ...           latest (2 years ago)

1 Versions

  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |