docs

docs/examples-docs/image-preview.md

@@ -10,13 +10,17 @@
 
 <script>
 import { ImagePreview } from 'src/index';
+import MobileComputed from 'components/mobile-computed';
 
 export default {
+  mixins: [MobileComputed],
+
   methods: {
     handleImagePreview() {
       ImagePreview([
-        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
       ]);
     }
   }
@@ -25,7 +29,22 @@ export default {
 
 ## ImagePreview 图片预览
 
-### 基础用法
+### 使用指南
+
+`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
+
+```js
+import { ImagePreview } from '@youzan/zanui-vue';
+
+ImagePreview([
+  imageUrl1,
+  imageUrl2
+]);
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo
 ```html
@@ -38,8 +57,8 @@ export default {
   methods: {
     handleImagePreview() {
       ImagePreview([
-        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
       ]);
     }
   }
@@ -48,3 +67,13 @@ export default {
 ```
 :::
 
+点击以下按钮查看手机端效果：
+
+<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
+<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
+
+### 方法参数
+
+| 参数名       | 说明      | 类型 |
+|-----------|-----------|-----------|
+| imageUrls | 需要预览的图片 | `Array` |