docs: prettier all markdown files
This commit is contained in:
chenjiahan
neverland
+56
-62
@@ -16,7 +16,7 @@ Vue.use(ImagePreview);
|
||||
```js
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/vant/apple-1.jpg',
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg'
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg',
|
||||
]);
|
||||
```
|
||||
|
||||
@@ -26,12 +26,12 @@ ImagePreview([
|
||||
ImagePreview({
|
||||
images: [
|
||||
'https://img.yzcdn.cn/vant/apple-1.jpg',
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg'
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg',
|
||||
],
|
||||
startPosition: 1,
|
||||
onClose() {
|
||||
// do something
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@@ -41,11 +41,8 @@ After setting the `closeable` attribute, the close icon will be displayed in the
|
||||
|
||||
```js
|
||||
ImagePreview({
|
||||
images: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
],
|
||||
closeable: true
|
||||
images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
|
||||
closeable: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -55,9 +52,9 @@ ImagePreview({
|
||||
const instance = ImagePreview({
|
||||
images: [
|
||||
'https://img.yzcdn.cn/vant/apple-1.jpg',
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg'
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg',
|
||||
],
|
||||
asyncClose: true
|
||||
asyncClose: true,
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
@@ -79,19 +76,16 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
index: 0,
|
||||
images: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]
|
||||
images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.index = index;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
@@ -99,48 +93,48 @@ export default {
|
||||
### Options
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| images | Images URL list | *string[]* | `[]` |
|
||||
| startPosition | Start position | *number \| string* | `0` |
|
||||
| showIndex | Whether to show index | *boolean* | `true` |
|
||||
| showIndicators | Whether to show indicators | *boolean* | `false` |
|
||||
| loop | Whether to enable loop | *boolean* | `true` |
|
||||
| swipeDuration | Animation duration (ms) | *number \| string* | `500` |
|
||||
| onClose | Triggered when close | *Function* | - |
|
||||
| onChange `v2.0.3` | Triggered when current image change | *Function* | - |
|
||||
| onScale | Triggered when current image scale | *Function* | - |
|
||||
| closeOnPopstate | Whether to close when popstate | *boolean* | `false` |
|
||||
| asyncClose | Whether to enable async close | *boolean* | `false` |
|
||||
| className | Custom className | *any* | - |
|
||||
| maxZoom | Max zoom | *number \| string* | `3` |
|
||||
| minZoom | Min zoom | *number \| string* | `1/3` |
|
||||
| closeable | Whether to show close icon | *boolean* | `false` |
|
||||
| closeIcon | Close icon name | *string* | `clear` |
|
||||
| closeIconPosition | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | *string* | `top-right` |
|
||||
| --- | --- | --- | --- |
|
||||
| images | Images URL list | _string[]_ | `[]` |
|
||||
| startPosition | Start position | _number \| string_ | `0` |
|
||||
| showIndex | Whether to show index | _boolean_ | `true` |
|
||||
| showIndicators | Whether to show indicators | _boolean_ | `false` |
|
||||
| loop | Whether to enable loop | _boolean_ | `true` |
|
||||
| swipeDuration | Animation duration (ms) | _number \| string_ | `500` |
|
||||
| onClose | Triggered when close | _Function_ | - |
|
||||
| onChange `v2.0.3` | Triggered when current image change | _Function_ | - |
|
||||
| onScale | Triggered when current image scale | _Function_ | - |
|
||||
| closeOnPopstate | Whether to close when popstate | _boolean_ | `false` |
|
||||
| asyncClose | Whether to enable async close | _boolean_ | `false` |
|
||||
| className | Custom className | _any_ | - |
|
||||
| maxZoom | Max zoom | _number \| string_ | `3` |
|
||||
| minZoom | Min zoom | _number \| string_ | `1/3` |
|
||||
| closeable | Whether to show close icon | _boolean_ | `false` |
|
||||
| closeIcon | Close icon name | _string_ | `clear` |
|
||||
| closeIconPosition | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| images | Images URL list | *string[]* | `[]` |
|
||||
| start-position | Start position | *number \| string* | `0` |
|
||||
| swipe-duration | Animation duration (ms) | *number \| string* | `500` |
|
||||
| show-index | Whether to show index | *boolean* | `true` |
|
||||
| show-indicators | Whether to show indicators | *boolean* | `false` |
|
||||
| loop | Whether to enable loop | *boolean* | `true` |
|
||||
| async-close | Whether to enable async close | *boolean* | `false` |
|
||||
| close-on-popstate | Whether to close when popstate | *boolean* | `false` |
|
||||
| class-name | Custom className | *any* | - |
|
||||
| max-zoom | Max zoom | *number \| string* | `3` |
|
||||
| min-zoom | Min zoom | *number \| string* | `1/3` |
|
||||
| closeable `v2.5.0` | Whether to show close icon | *boolean* | `false` |
|
||||
| close-icon `v2.5.0` | Close icon name | *string* | `clear` |
|
||||
| close-icon-position `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | *string* | `top-right` |
|
||||
| --- | --- | --- | --- |
|
||||
| images | Images URL list | _string[]_ | `[]` |
|
||||
| start-position | Start position | _number \| string_ | `0` |
|
||||
| swipe-duration | Animation duration (ms) | _number \| string_ | `500` |
|
||||
| show-index | Whether to show index | _boolean_ | `true` |
|
||||
| show-indicators | Whether to show indicators | _boolean_ | `false` |
|
||||
| loop | Whether to enable loop | _boolean_ | `true` |
|
||||
| async-close | Whether to enable async close | _boolean_ | `false` |
|
||||
| close-on-popstate | Whether to close when popstate | _boolean_ | `false` |
|
||||
| class-name | Custom className | _any_ | - |
|
||||
| max-zoom | Max zoom | _number \| string_ | `3` |
|
||||
| min-zoom | Min zoom | _number \| string_ | `1/3` |
|
||||
| closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` |
|
||||
| close-icon `v2.5.0` | Close icon name | _string_ | `clear` |
|
||||
| close-icon-position `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|------|------|------|
|
||||
| --- | --- | --- |
|
||||
| close | Triggered when close | { index, url } |
|
||||
| closed `v2.5.6` | Triggered after closed | - |
|
||||
| change | Triggered when current image change | index: index of current image |
|
||||
@@ -148,21 +142,21 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| index | Custom index |
|
||||
| Name | Description |
|
||||
| ----- | -------------------------------------------- |
|
||||
| index | Custom index |
|
||||
| cover | Custom content that covers the image preview |
|
||||
|
||||
### onClose Parematers
|
||||
|
||||
| Attribute | Description | Type |
|
||||
|------|------|------|
|
||||
| url | Url of current image | *number* |
|
||||
| index | Index of current image | *number* |
|
||||
| Attribute | Description | Type |
|
||||
| --------- | ---------------------- | -------- |
|
||||
| url | Url of current image | _number_ |
|
||||
| index | Index of current image | _number_ |
|
||||
|
||||
### onScale Parematers
|
||||
|
||||
| Attribute | Description | Type |
|
||||
|------|------|------|
|
||||
| index | Index of current image | *number* |
|
||||
| scale | scale of current image | *number* |
|
||||
| Attribute | Description | Type |
|
||||
| --------- | ---------------------- | -------- |
|
||||
| index | Index of current image | _number_ |
|
||||
| scale | scale of current image | _number_ |
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
### 引入
|
||||
|
||||
`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
|
||||
`ImagePreview`和其他组件不同，不是通过 HTML 结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
@@ -18,10 +18,7 @@ Vue.use(ImagePreview);
|
||||
直接传入图片数组，即可展示图片预览
|
||||
|
||||
```js
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]);
|
||||
ImagePreview(['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg']);
|
||||
```
|
||||
|
||||
### 传入配置项
|
||||
@@ -30,14 +27,11 @@ ImagePreview([
|
||||
|
||||
```js
|
||||
ImagePreview({
|
||||
images: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
],
|
||||
images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
|
||||
startPosition: 1,
|
||||
onClose() {
|
||||
// do something
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@@ -47,11 +41,8 @@ ImagePreview({
|
||||
|
||||
```js
|
||||
ImagePreview({
|
||||
images: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
],
|
||||
closeable: true
|
||||
images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
|
||||
closeable: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -61,11 +52,8 @@ ImagePreview({
|
||||
|
||||
```js
|
||||
const instance = ImagePreview({
|
||||
images: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
],
|
||||
asyncClose: true
|
||||
images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
|
||||
asyncClose: true,
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
@@ -89,19 +77,16 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
index: 0,
|
||||
images: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]
|
||||
images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.index = index;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
@@ -111,52 +96,52 @@ export default {
|
||||
通过函数调用 `ImagePreview` 时，支持传入以下选项：
|
||||
|
||||
| 参数名 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| images | 需要预览的图片 URL 数组 | *string[]* | `[]` |
|
||||
| startPosition | 图片预览起始位置索引 | *number \| string* | `0` |
|
||||
| swipeDuration | 动画时长，单位为`ms` | *number \| string* | `500` |
|
||||
| showIndex | 是否显示页码 | *boolean* | `true` |
|
||||
| showIndicators | 是否显示轮播指示器 | *boolean* | `false` |
|
||||
| loop | 是否开启循环播放 | *boolean* | `true` |
|
||||
| onClose | 关闭时的回调函数 | *Function* | - |
|
||||
| onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | *Function* | - |
|
||||
| onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | *Function* | - |
|
||||
| asyncClose | 是否开启异步关闭 | *boolean* | `false` |
|
||||
| closeOnPopstate | 是否在页面回退时自动关闭 | *boolean* | `false` |
|
||||
| className | 自定义类名 | *any* | - |
|
||||
| maxZoom | 手势缩放时，最大缩放比例 | *number \| string* | `3` |
|
||||
| minZoom | 手势缩放时，最小缩放比例 | *number \| string* | `1/3` |
|
||||
| closeable | 是否显示关闭图标 | *boolean* | `false` |
|
||||
| closeIcon | 关闭图标名称或图片链接 | *string* | `clear` |
|
||||
| closeIconPosition | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | *string* | `top-right` |
|
||||
| --- | --- | --- | --- |
|
||||
| images | 需要预览的图片 URL 数组 | _string[]_ | `[]` |
|
||||
| startPosition | 图片预览起始位置索引 | _number \| string_ | `0` |
|
||||
| swipeDuration | 动画时长，单位为`ms` | _number \| string_ | `500` |
|
||||
| showIndex | 是否显示页码 | _boolean_ | `true` |
|
||||
| showIndicators | 是否显示轮播指示器 | _boolean_ | `false` |
|
||||
| loop | 是否开启循环播放 | _boolean_ | `true` |
|
||||
| onClose | 关闭时的回调函数 | _Function_ | - |
|
||||
| onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | _Function_ | - |
|
||||
| onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | _Function_ | - |
|
||||
| asyncClose | 是否开启异步关闭 | _boolean_ | `false` |
|
||||
| closeOnPopstate | 是否在页面回退时自动关闭 | _boolean_ | `false` |
|
||||
| className | 自定义类名 | _any_ | - |
|
||||
| maxZoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` |
|
||||
| minZoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` |
|
||||
| closeable | 是否显示关闭图标 | _boolean_ | `false` |
|
||||
| closeIcon | 关闭图标名称或图片链接 | _string_ | `clear` |
|
||||
| closeIconPosition | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
|
||||
### Props
|
||||
|
||||
通过组件调用 `ImagePreview` 时，支持以下 Props：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| images | 需要预览的图片 URL 数组 | *string[]* | `[]` |
|
||||
| start-position | 图片预览起始位置索引 | *number \| string* | `0` |
|
||||
| swipe-duration | 动画时长，单位为 ms | *number \| string* | `500` |
|
||||
| show-index | 是否显示页码 | *boolean* | `true` |
|
||||
| show-indicators | 是否显示轮播指示器 | *boolean* | `false` |
|
||||
| loop | 是否开启循环播放 | *boolean* | `true` |
|
||||
| async-close | 是否开启异步关闭 | *boolean* | `false` |
|
||||
| close-on-popstate | 是否在页面回退时自动关闭 | *boolean* | `false` |
|
||||
| class-name | 自定义类名 | *any* | - |
|
||||
| max-zoom | 手势缩放时，最大缩放比例 | *number \| string* | `3` |
|
||||
| min-zoom | 手势缩放时，最小缩放比例 | *number \| string* | `1/3` |
|
||||
| closeable `v2.5.0` | 是否显示关闭图标 | *boolean* | `false` |
|
||||
| close-icon `v2.5.0` | 关闭图标名称或图片链接 | *string* | `clear` |
|
||||
| close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | *string* | `top-right` |
|
||||
| --- | --- | --- | --- |
|
||||
| images | 需要预览的图片 URL 数组 | _string[]_ | `[]` |
|
||||
| start-position | 图片预览起始位置索引 | _number \| string_ | `0` |
|
||||
| swipe-duration | 动画时长，单位为 ms | _number \| string_ | `500` |
|
||||
| show-index | 是否显示页码 | _boolean_ | `true` |
|
||||
| show-indicators | 是否显示轮播指示器 | _boolean_ | `false` |
|
||||
| loop | 是否开启循环播放 | _boolean_ | `true` |
|
||||
| async-close | 是否开启异步关闭 | _boolean_ | `false` |
|
||||
| close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `false` |
|
||||
| class-name | 自定义类名 | _any_ | - |
|
||||
| max-zoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` |
|
||||
| min-zoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` |
|
||||
| closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` |
|
||||
| close-icon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` |
|
||||
| close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
|
||||
### Events
|
||||
|
||||
通过组件调用 `ImagePreview` 时，支持以下事件：
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| --- | --- | --- |
|
||||
| close | 关闭时触发 | { index: 索引, url: 图片链接 } |
|
||||
| closed `v2.5.6` | 关闭且且动画结束后触发 | - |
|
||||
| change | 切换当前图片时触发 | index: 当前图片的索引 |
|
||||
@@ -166,24 +151,24 @@ export default {
|
||||
|
||||
通过组件调用 `ImagePreview` 时，支持以下插槽：
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| index | 自定义页码内容 |
|
||||
| 名称 | 说明 |
|
||||
| ----- | ------------------------------ |
|
||||
| index | 自定义页码内容 |
|
||||
| cover | 自定义覆盖在图片预览上方的内容 |
|
||||
|
||||
### onClose 回调参数
|
||||
|
||||
| 参数名 | 说明 | 类型 |
|
||||
|------|------|------|
|
||||
| url | 当前图片 URL | *string* |
|
||||
| index | 当前图片的索引值 | *number* |
|
||||
| 参数名 | 说明 | 类型 |
|
||||
| ------ | ---------------- | -------- |
|
||||
| url | 当前图片 URL | _string_ |
|
||||
| index | 当前图片的索引值 | _number_ |
|
||||
|
||||
### onScale 回调参数
|
||||
|
||||
| 参数名 | 说明 | 类型 |
|
||||
|------|------|------|
|
||||
| index | 当前图片的索引值 | *number* |
|
||||
| scale | 当前图片的缩放值 | *number* |
|
||||
| 参数名 | 说明 | 类型 |
|
||||
| ------ | ---------------- | -------- |
|
||||
| index | 当前图片的索引值 | _number_ |
|
||||
| scale | 当前图片的缩放值 | _number_ |
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
||||
Reference in New Issue
Block a user