1.3.2 • Published 2 years ago
@fengsi/vue-image v1.3.2
@fengsi/vue-image
A vue component for lazy loading and zooming of images
NPM
npm install @fengsi/vue-imageYarn
yarn add @fengsi/vue-imageStyling
Import the CSS from your node_modules directory using:
import '@fengsi/vue-image/lib/vue-image.css';Usage
Import the component and include in your template:
import image from '@fengsi/vue-image';
...
export default {
components: {
'v-image': image
}
}
...
<v-image src="/path/to/image.jpg" lazy-src="/path/to/lazy-image.jpg" zoom-src="/path/to/zoom-image.jpg" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | String | 图片原始链接 | |
| lazySrc | String | 图片懒加载链接 | |
| sizes | String | 与 srcset 一起使用的 sizes, 用于 img 和 source 标签 | |
| sourceSrcset | String | source 标签的 srcset 属性 | |
| type | String | image/webp | source 标签的 type 属性 |
| imgSrcset | String | img 标签的 srcset 属性 | |
| imgStyle | Object | img 标签的 style 属性 | |
| width | Number, String | 0 | img 标签的 width 属性 |
| height | Number, String | 0 | img 标签的 height 属性 |
| alt | String | img 标签的 alt 属性 | |
| 以下是放大功能选项 | |||
| zoomSrc | String | 可放大图片链接 | |
| moveType | String | pan | pan or drag |
| zoomType | String | click | click or hover |
| zoomScale | Number | 1 | 放大倍数 |
| mobileBreakpoint | Number | 600 | 移动端节点 |
| fullscreenOnMobile | Boolean | false | 在移动端全屏放大 |
| hideCloseButton | Boolean | false | 隐藏取消按钮 |
| afterZoomIn | Function | Function to be called after zoom in. | |
| afterZoomOut | Function | Function to be called after zoom out. | |
| 以下是自己项目需求选项 | |||
| imgproxy | Function | 图片代理 | |
| isProductImage | Boolean | false | 是否为产品详情图片 |
| lazy | Boolean | true | 是否懒加载 |
| zoom | Boolean | false | 是否启用放大功能 |
| widths | Array | 响应式图片尺寸(number) |