@forzoom/thumbnail

Usage

``typescript
import Vue from 'vue';
import Thumbnail from '@forzoom/thumbnail';

const imageFilter = Thumbnail.generateImageFilter({
bed: {
aliyun: 'https://aliyun.example.com',
},
isAliyun(listener: ImageFilterListener, options: ImageFilterOptions) {
return /aliyun.example.com/.test(listener.src);
},
})

Vue.use(Thumbnail, {
imageFilter,
enterClass: 'add-blur',
leaveClass: 'transition-blur',
});
`

`css
.add-blur {
transition: 0.3s filter, 0.3s -webkit-filter;
-webkit-filter: blur(4px);
filter: blur(4px);
}
// 图片模糊第二层
.transition-blur {
-webkit-filter: blur(0px);
filter: blur(0px);
}
`

---

$3


`html

`
生成内容(以阿里云为例)
`html

`
需要配置
`typescript
const imageFilter = Thumbnail.generateImageFilter({
isAliyun(listener: ImageFilterListener, options: ImageFilterOptions) {
return /aliyun.exmaple.com/.test(listener.src);
},
});
Vue.use({
imageFilter,
});
`

---

$3

`html

`
生成内容
`html

`
需要配置
`typescript
const imageFilter = Thumbnail.generateImageFilter({
bed: {
aliyun: 'https://aliyun.example.com',
qiniu: 'https://qiniu.example.com',
default: 'https://aliyun.example.com', // 当没有域名是将默认使用default对应的域名
},
});
Vue.use({
imageFilter,
});
`
选择不同的域名，使用data-bed
`html

`
生成内容
`html

`

---

使用data-thumbnail-width将触发thumbnail的逻辑，将使用data-thumbnail-width的值替换data-width的值
`html

``

requirement

1. 依赖于core-js@3
2. 依赖于url

Roadmap

1. doTransform不需要由ThumbnailPluginOptions.doTransform提供