https://github.com/qqabcv520/vue-imgs

vue图片组件
https://github.com/qqabcv520/vue-imgs

image img photo swiper vue vue2

Last synced: 3 months ago
JSON representation

vue图片组件

• Host: GitHub
• URL: https://github.com/qqabcv520/vue-imgs
• Owner: qqabcv520
• License: mit
• Created: 2018-10-09T03:39:33.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-29T14:20:56.000Z (almost 2 years ago)
• Last Synced: 2024-09-16T14:08:58.106Z (5 months ago)
• Topics: image, img, photo, swiper, vue, vue2
• Language: Vue
• Size: 808 KB
• Stars: 12
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-imgs

![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)

vue图片组件

[在线演示](https://qqabcv520.github.io/vue-imgs/examples/) 

## 安装

npm

```

npm i vue-imgs --save

```

yarn

```

yarn add vue-imgs

```

或者直接引入

```

```

## 使用

* [AspectImage组件](#aspectimage)  

* [ImgPreview组件](#imgpreview)

### AspectImage

图片组件

#### 注册组件

```

import {AspectImage} from 'vue-imgs'

export default {

  components: {

      AspectImage

  }

}

```

#### 属性

| 属性 | 类型 | 默认值 | 说明 |

| :--- | :--- | :--- | :--- |

| mode | `string` | `'aspectFill'` | 图片的缩放模式 |

| src  | `string` | `''` | 图片链接 |

### ImgPreview

图片预览组件

#### 注册组件

```

import {ImgPreview} from 'vue-imgs'

export default {

  components: {

      ImgPreview

  }

}

```

#### 属性

| 属性 | 类型 | 默认值 | 说明 |

| :--- | :--- | :--- | :--- |

| mode | `string` | `'aspectFill'` | 图片缩放模式 |

| src  | `string` | `''` | 图片链接 |

| title  | `string` | `''` | 图片标题，可以是HTML |

| group  | `string\|number` | (默认为uuid，即单独一组) | 指定图片分组索引，相同索引归属为一个分组，同组预览时可切换预览 |

| thumbSrc  | `string` | (默认为src) | 小图时的src |

| order  | `number` | `0` | 同分组图片排序 |

#### 缩放模式

`'scaleToFill'` 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

`'aspectFill'` 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

## TODO

* 图片懒加载

* 占位图

* webP格式

* 缩放模式aspectFit：保持比例显示全部内容

* 缩放模式widthFix：宽度不变，高度自动变化，保持原图宽高比不变

* 缩放模式auto：按照图片原大小显示