```typescript import Vue from 'vue'; import Thumbnail from '@forzoom/thumbnail';
npm install @forzoom/thumbnail``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);
}
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
![]()
``1. 依赖于core-js@3
2. 依赖于url
1. doTransform不需要由ThumbnailPluginOptions.doTransform提供