# dj-vue-webp

> ```js npm i dj-vue-webp --save-dev ``` ## 引入并加载 ```js import VueWebp from 'dj-vue-webp'

Latest version **1.0.7** (published 2017-11-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install dj-vue-webp
pnpm add dj-vue-webp
yarn add dj-vue-webp
bun add dj-vue-webp
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2017-11-16 |
| First published | 2017-07-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | dhq |
| Maintainers | hustdhq |

## Links

- npm: https://www.npmjs.com/package/dj-vue-webp
- npm.io page: https://npm.io/package/dj-vue-webp

## Recent versions

- 1.0.7 (latest) — 2017-11-16
- 1.0.6 — 2017-07-13
- 1.0.5 — 2017-07-13
- 1.0.4 — 2017-07-13
- 1.0.3 — 2017-07-11
- 1.0.2 — 2017-07-06
- 1.0.1 — 2017-07-06
- 1.0.0 — 2017-07-06

## README

# 使用方法
## 安装
```js
npm i dj-vue-webp --save-dev
```
## 引入并加载
```js
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函数
    }
})
```
## 指令
```js
<img v-webp="//images.daojia.com/1.png">
<div v-webp.bg="//images.daojia.com/1.png"></div>
```
# API
```js
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`图片作为元素背景图展示

---
_Source: https://npm.io/package/dj-vue-webp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._