@forzoom/thumbnail
```typescript import Vue from 'vue'; import Thumbnail from '@forzoom/thumbnail';
Last updated 4 months ago by forzoom .
MIT · Original npm · Tarball · package.json
$ cnpm install @forzoom/thumbnail 
SYNC missed versions from official npm registry.

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提供

Current Tags

  • 0.2.0                                ...           latest (4 months ago)

9 Versions

  • 0.2.0                                ...           4 months ago
  • 0.1.1                                ...           6 months ago
  • 0.1.0                                ...           6 months ago
  • 0.0.6                                ...           6 months ago
  • 0.0.5 [deprecated]           ...           a year ago
  • 0.0.4                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2                                ...           a year ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 4
Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |