Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/accforgit/vue-active-preview

:evergreen_tree: A PhotoSwipe Image Preview component for Vue
https://github.com/accforgit/vue-active-preview

component preview previewimage vue

Last synced: 12 days ago
JSON representation

:evergreen_tree: A PhotoSwipe Image Preview component for Vue

Host: GitHub
URL: https://github.com/accforgit/vue-active-preview
Owner: accforgit
License: mit
Created: 2019-01-03T08:24:23.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2019-02-28T14:44:11.000Z (over 5 years ago)
Last Synced: 2024-10-31T17:52:53.114Z (18 days ago)
Topics: component, preview, previewimage, vue
Language: Vue
Homepage:
Size: 698 KB
Stars: 22
Watchers: 1
Forks: 5
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # vue-active-preview

![NPM](https://nodei.co/npm/vue-active-preview.png?downloads=true&downloadRank=true&stars=true)

![img](https://img.shields.io/npm/v/vue-active-preview.svg) ![img](https://img.shields.io/bundlephobia/minzip/vue-active-preview.svg) ![img](https://img.shields.io/npm/dt/vue-active-preview.svg) ![img](https://img.shields.io/github/license/accforgit/vue-active-preview.svg)

`vue-active-preview` 是一个面向移动端、无依赖、轻量级的 `vue`放大预览组件(`image gallery`)

![img](https://raw.githubusercontent.com/accforgit/vue-active-preview/master/public/preview_1.gif)

[English](https://github.com/accforgit/vue-active-preview/blob/master/README_US.md) | 简体中文

## 示例

- [Basic Demo](https://accforgit.github.io/vue-active-preview/basic.html)

![img](https://raw.githubusercontent.com/accforgit/vue-active-preview/master/public/vue-active-preview.png)

- [vue-active-preview](https://github.com/accforgit/vue-active-preview) 与 [vue-active-swiper](https://github.com/accforgit/vue-active-swiper)结合使用的 [Live Demo](https://accforgit.github.io/vue-active-preview/swiper_preview.html)

![img](https://raw.githubusercontent.com/accforgit/vue-active-preview/master/public/swiper_preview.png)

## 安装

```

npm install vue-active-preview --save

```

## 导入

### 全局导入

```js

// 样式引用

import 'vue-active-preview/dist/VueActivePreview.css'

import Vue from 'vue'

import VueActivePreview from 'vue-active-preview'

Vue.use(VueActivePreview)

```

### 局部导入

```js

// 样式引用

import 'vue-active-preview/dist/VueActivePreview.css'

// in ES6 modules

import VueActivePreview from 'vue-active-preview'

// in CommonJS

const VueActivePreview = require('vue-active-preview')

export default {

  components: {

    VueActivePreview

  }

}

```

### script 脚本形式导入

```html

```

```js

new Vue({

  el: '#app',

  components: {

    VueActivePreview

  }

})

```

## 用法

在 `Vue`组件实例中使用:

```html

```

## Options

### Props

|参数|类型|描述|默认值|是否必须|

|----|---|----|----|---|

|urlList|Array|传入的图片数组|[]|否|

|backgroundSize|String|图片以何种缩放的形式铺在滑动容器框(`Swiper`)内，取值及效果都与 `CSS background-size`一致 
只有当指定了 urlList 时才有效|contain|否|

|maxScaleValue|Number|最大放大倍数，如果设置为 0，表示不限制最大放大倍数|5|否|

|showCounter|Boolean|是否需要默认的计数器|false|否|

|counterStyle|Object|自定义默认计数器的样式 
只有当 `showCounter`为 `true`时才有效|null|否|

|startIndex|Number|起始渲染显示的previewItem index|0|否|

|criticalValue|Number|临界点的比例值，当超过此值代表的临界点，则将自动滑动到下一张图片|1/3|否|

|autoPlayDelay|Number|如果指定了此参数，并且值 `>= 0`，则将会将此值当做 自动轮播`delay`的时间(单位为 `ms`)进行自动轮播；不指定则不自动轮播 
如果想要指定此值，一般建议设置为 `3000`|null|否|

|duration|Number|自动滚动到稳定位置所需的时间，单位是秒(ms)|350|否|

|noDragWhenSingle|Boolean|如果只有一个 swipeItem，是否禁止拖动|true|否|

### Events

|事件名|描述|参数|

|---|---|---|

|click|整个组件的点击事件（可用于控制组件的显示/隐藏）|activeIndex|

|change|每次滚动结束后的回调|activeIndex|

## 额外的能力

### slot

`VueActivePreview`组件还可以接收一个 `slot`，方便开发者更加自由地定制化组件，但请注意的是，此 `slot`只是作为 `VueActivePreview`组件的一个普通子元素，而不是可缩放预览的图片组件

```html

  
slot content


```

## License

MIT