1.3.2 • Published 6 months ago

@fengsi/vue-image v1.3.2

Weekly downloads
-
License
-
Repository
-
Last release
6 months ago

@fengsi/vue-image

A vue component for lazy loading and zooming of images

NPM

npm install @fengsi/vue-image

Yarn

yarn add @fengsi/vue-image

Styling

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

PropTypeDefaultDescription
srcString图片原始链接
lazySrcString图片懒加载链接
sizesString与 srcset 一起使用的 sizes, 用于 img 和 source 标签
sourceSrcsetStringsource 标签的 srcset 属性
typeStringimage/webpsource 标签的 type 属性
imgSrcsetStringimg 标签的 srcset 属性
imgStyleObjectimg 标签的 style 属性
widthNumber, String0img 标签的 width 属性
heightNumber, String0img 标签的 height 属性
altStringimg 标签的 alt 属性
以下是放大功能选项
zoomSrcString可放大图片链接
moveTypeStringpanpan or drag
zoomTypeStringclickclick or hover
zoomScaleNumber1放大倍数
mobileBreakpointNumber600移动端节点
fullscreenOnMobileBooleanfalse在移动端全屏放大
hideCloseButtonBooleanfalse隐藏取消按钮
afterZoomInFunctionFunction to be called after zoom in.
afterZoomOutFunctionFunction to be called after zoom out.
以下是自己项目需求选项
imgproxyFunction图片代理
isProductImageBooleanfalse是否为产品详情图片
lazyBooleantrue是否懒加载
zoomBooleanfalse是否启用放大功能
widthsArray响应式图片尺寸(number)
1.3.2

6 months ago

1.3.1

2 years ago

1.3.0

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.0

3 years ago

1.1.0

3 years ago