npm.io
1.0.7 • Published 8 years ago

dj-vue-webp

Licence
ISC
Version
1.0.7
Deps
0
Vulns
0
Weekly
0
SummaryDependencyVersions

使用方法

安装

npm i dj-vue-webp --save-dev

引入并加载

import VueWebp from 'dj-vue-webp'
  
// default config，一般项目里这样用就行了
Vue.use(VueWebp)
  
// custom config
Vue.use(VueWebp, {
    isCDN: /(static.daojia.com|static.djtest.cn)/,  //图片url满足该正则条件，才会用filter过滤
    filter(src) {
        return src.replace('.png', '.webp')         //filter函数
    }
})

指令

<img v-webp="//images.daojia.com/1.png">
<div v-webp.bg="//images.daojia.com/1.png"></div>

API

Vue.use(VueWebp, options)

options

字段 类型 说明 默认值
isCDN RegExp 用于判断需要替换为webp的图片域名的正则表达式，若要匹配所有域名，可将其配置为/./ /(images.daojia.com\丨images.djtest.cn)/
filter Function 用于将普通图片url修改为webp图片的url，入参为图片url，返回值为图片webp格式对应url function(src) { return src.indexOf('@') > -1 ? src + '.webp' : src + '@.webp' }

modifiers

.bg图片作为元素背景图展示