Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 007fea7

Browse files
accforgitaccforgit
committed
init
1 parent 7467eb5 commit 007fea7

15 files changed

+4836
-112
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.DS_Store
22
node_modules
3-
/dist
43

54
# local env files
65
.env.local
@@ -19,3 +18,5 @@ yarn-error.log*
1918
*.njsproj
2019
*.sln
2120
*.sw*
21+
*.map
22+
babel.config.js

‎README.md‎

Lines changed: 99 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,113 @@
1-
# vue-active-preview
1+
# vue-active-swiper
22

3-
## Project setup
4-
```
5-
npm install
6-
```
3+
![NPM](https://nodei.co/npm/vue-active-preview.png?downloads=true&downloadRank=true&stars=true)
4+
5+
![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)
6+
7+
`vue-active-preview` 是一个面向移动端、无依赖、轻量级的 `vue`放大预览组件(`image gallery`)
8+
9+
![img](https://raw.githubusercontent.com/accforgit/vue-active-preview/master/public/preview-1.gif)
10+
11+
[English](https://github.com/accforgit/vue-active-preview/blob/master/README_US.md) | 简体中文
12+
13+
## 示例
14+
15+
- [example - basic](https://accforgit.github.io/vue-active-preview/basic.html)
16+
17+
## 安装
718

8-
### Compiles and hot-reloads for development
919
```
10-
npm run serve
20+
npm install vue-active-preview --save
1121
```
1222

13-
### Compiles and minifies for production
23+
## 导入
24+
25+
### 全局导入
26+
27+
```js
28+
// 样式引用
29+
import 'vue-active-preview/dist/VueActivePreview.css'
30+
31+
import Vue from 'vue'
32+
import VueActivePreview from 'vue-active-preview'
33+
34+
Vue.use(VueActivePreview)
1435
```
15-
npm run build
36+
37+
### 局部导入
38+
39+
```js
40+
// 样式引用
41+
import 'vue-active-preview/dist/VueActivePreview.css'
42+
43+
// in ES6 modules
44+
import VueActivePreview from 'vue-active-preview'
45+
46+
// in CommonJS
47+
const VueActivePreview = require('vue-active-preview')
48+
49+
export default {
50+
components: {
51+
VueActivePreview
52+
}
53+
}
1654
```
1755

18-
### Run your tests
56+
### script 脚本形式导入
57+
58+
```html
59+
<link rel="stylesheet" href="../node-modules/vue-active-preview/dist/VueActivePreview.css" charset="utf-8">
60+
<script src="../node-modules/vue-active-preview/dist/VueActivePreview.umd.min.js"></script>
1961
```
20-
npm run test
62+
63+
```js
64+
new Vue({
65+
el: '#app',
66+
components: {
67+
VueActivePreview
68+
}
69+
})
2170
```
2271

23-
### Lints and fixes files
72+
## 用法
73+
74+
在 `Vue`组件实例中使用:
75+
```html
76+
<VueActivePreview :urlList="[
77+
'https://dummyimage.com/375x100/FB8A80?text=1',
78+
'https://dummyimage.com/375x100/29A90F?text=2',
79+
'https://dummyimage.com/375x100/6F9DFF?text=3'
80+
]" />
2481
```
25-
npm run lint
82+
83+
## Props
84+
85+
|参数|类型|描述|默认值|是否必须|
86+
|----|---|----|----|---|
87+
|urlList|Array|传入的图片数组|[]|否|
88+
|backgroundSize|String|图片以何种缩放的形式铺在滑动容器框(`Swiper`)内，取值及效果都与 `CSS background-size`一致 <br>只有当指定了 urlList 时才有效|contain|否|
89+
|maxScaleValue|Number|最大放大倍数，如果设置为 0，表示不限制最大放大倍数|5|否|
90+
|showCounter|Boolean|是否需要默认的计数器|false|否|
91+
|counterStyle|Object|自定义默认计数器的样式 <br>只有当 `showCounter`为 `true`时才有效|null|否|
92+
|startIndex|Number|起始渲染显示的previewItem index|0|否|
93+
|criticalValue|Number|临界点的比例值，当超过此值代表的临界点，则将自动滑动到下一张图片|1/3|否|
94+
|autoPlayDelay|Number|如果指定了此参数，并且值 `>= 0`，则将会将此值当做 自动轮播`delay`的时间(单位为 `ms`)进行自动轮播；不指定则不自动轮播 <br>如果想要指定此值，一般建议设置为 `3000`|null|否|
95+
|duration|Number|自动滚动到稳定位置所需的时间，单位是秒(ms)|350|否|
96+
|noDragWhenSingle|Boolean|如果只有一个 swipeItem，是否禁止拖动|true|否|
97+
|changeCallback|Function|每次滚动结束后的回调，回调参数为当前的 `activeIndex`|-|否|
98+
99+
## 额外的能力
100+
101+
### slot
102+
103+
`VueActivePreview`组件还可以接收一个 `slot`，方便开发者更加自由地定制化组件，但请注意的是，此 `slot`只是作为 `VueActivePreview`组件的一个普通子元素，而不是可缩放预览的图片组件
104+
105+
```html
106+
<VueActivePreview :urlList="urlList">
107+
<p>slot content</p>
108+
</VueActivePreview>
26109
```
27110

28-
### Customize configuration
29-
See [Configuration Reference](https://cli.vuejs.org/config/).
111+
## License
112+
113+
MIT

‎README_US.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# vue-active-swiper
2+
3+
![NPM](https://nodei.co/npm/vue-active-preview.png?downloads=true&downloadRank=true&stars=true)
4+
5+
![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)
6+
7+
`vue-active-preview` is a Mobile-oriented、No dependencies、Lightweight PhotoSwipe Component(`image gallery`) for Vue.
8+
9+
![img](https://raw.githubusercontent.com/accforgit/vue-active-preview/master/public/preview_1.gif)
10+
11+
[简体中文](https://github.com/accforgit/vue-active-preview/blob/master/README.md) | English
12+
13+
## Example
14+
15+
- [Live Demo](https://accforgit.github.io/vue-active-preview/basic.html)
16+
17+
## Install
18+
19+
```
20+
npm install vue-active-preview --save
21+
```
22+
23+
## Import
24+
25+
### import with global
26+
27+
```js
28+
// require styles
29+
import 'vue-active-preview/dist/VueActivePreview.css'
30+
31+
import Vue from 'vue'
32+
import VueActivePreview from 'vue-active-preview'
33+
34+
Vue.use(VueActivePreview)
35+
```
36+
37+
### import with component
38+
39+
```js
40+
// require styles
41+
import 'vue-active-preview/dist/VueActivePreview.css'
42+
43+
// in ES6 modules
44+
import VueActivePreview from 'vue-active-preview'
45+
46+
// in CommonJS
47+
const VueActivePreview = require('vue-active-preview')
48+
49+
export default {
50+
components: {
51+
VueActivePreview
52+
}
53+
}
54+
```
55+
56+
### import with script
57+
58+
```html
59+
<link rel="stylesheet" href="../node-modules/vue-active-preview/dist/VueActivePreview.css" charset="utf-8">
60+
<script src="../node-modules/vue-active-preview/dist/VueActivePreview.umd.min.js"></script>
61+
```
62+
63+
```js
64+
new Vue({
65+
el: '#app',
66+
components: {
67+
VueActivePreview
68+
}
69+
})
70+
```
71+
72+
## Usage
73+
74+
Work on a Vue instance:
75+
```html
76+
<VueActivePreview :urlList="[
77+
'https://dummyimage.com/375x100/FB8A80?text=1',
78+
'https://dummyimage.com/375x100/29A90F?text=2',
79+
'https://dummyimage.com/375x100/6F9DFF?text=3'
80+
]" />
81+
```
82+
83+
## Props
84+
85+
|Option|Type|Description|Default|necessary|
86+
|----|---|----|----|---|
87+
|urlList|Array|image array|[]|false|
88+
|backgroundSize|String|Specifies how the image is scaled in the sliding-container-box，Value and Effect are the same as `CSS background-size`|contain|false|
89+
|maxScaleValue|Number|Maximum magnification，if the value is 0，then no limit|5|false|
90+
|showCounter|Boolean|if need a default counter|false|false|
91+
|counterStyle|Object|Customize the style of the default counter <br>Valid only when `showCounter` is `true`|null|false|
92+
|startIndex|Number|Start preview item index|0|false|
93+
|criticalValue|Number|Proportional value of critical point <br>When it exceeds the critical point represented by this value, it will automatically slide to the next picture.|1/3|false|
94+
|autoPlayDelay|Number|If this parameter is specified and the value `>= 0`, the value will be taken as the time of automatic rotation `delay`(`ms`) for automatic rotation;Non-designated non-automatic rotation <br>If you want to specify this value, it is generally recommended to set it to `3000`|null|false|
95+
|duration|Number|The time(`ms`) required to automatically scroll to a stable position|350|false|
96+
|noDragWhenSingle|Boolean|If there is only one `swipeItem`, is dragging prohibited|true|false|
97+
|changeCallback|Function|Callback after each scroll，Callback parameter is current `activeIndex`|-|false|
98+
99+
## Extra
100+
101+
### slot
102+
103+
`Swiper` can also receive a slot，make it easier for developers to customize components more freely:
104+
```html
105+
<VueActivePreview :urlList="urlList">
106+
<p>slot content</p>
107+
</VueActivePreview>
108+
```
109+
110+
## License
111+
112+
MIT

0 commit comments

Comments
 (0)