@forzoom/thumbnail v0.2.0

Usage

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',
});

.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);
}

使用data-width

<img v-thumbnail="https://aliyun.example.com/test.jpg" data-width="100" />

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

<img src="https://aliyun.example.com/test.jpg?x-oss-process=image/resize,w_100" />

需要配置

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

让thumbnail自动添加域名

<img v-thumbnail="/test.jpg" />

生成内容

<img src="https://aliyun.example.com/test.jpg" />

需要配置

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

<img v-thumbnail="/test.jpg" data-bed="qiniu" />

生成内容

<img src="https://qiniu.example.com/test.jpg" />

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

<img v-thumbnail="example.jpg" data-thumbnail-width="100" />

requirement

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

Roadmap

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