feat: ✨ Img 组件添加预览图片属性 (#945)

* feat(img): 添加预览图片属性

* docs: ✏️  img 组件添加 preview-src 属性

Author: abigmiu

docs/component/img.md

@@ -87,6 +87,12 @@ mode 为小程序原生属性，参考[微信小程序 image 官方文档](https
 <wd-img :width="100" :height="100" :src="joy" :enable-preview="true" />
 ```
 
+也可以传入 `preview-src` 属性来预览另外的图片
+
+```html
+<wd-img :width="100" :height="100" :src="joy" :preview-src="img" :enable-preview="true" />
+```
+
 ## Attributes
 
 | 参数                   | 说明                                               | 类型            | 可选值                                                                                                                                                                             | 默认值        | 最低版本         |
@@ -99,6 +105,7 @@ mode 为小程序原生属性，参考[微信小程序 image 官方文档](https
 | radius                 | 圆角大小，默认单位为 px                            | number / string | -                                                                                                                                                                                  | -             | -                |
 | enable-preview         | 是否支持点击预览                                   | boolean         | -                                                                                                                                                                                  | false         | 1.2.11           |
 | show-menu-by-longpress | 开启长按图片显示识别小程序码菜单，仅微信小程序支持 | boolean         | -                                                                                                                                                                                  | false         | 1.3.11 |
+| preview-src             | 预览图片链接                                     | string           |  -                                                                                 | -             | $LOWEST_VERSION$ |
 
 ## Events
 

src/pages/img/Index.vue

@@ -48,7 +48,12 @@
     </demo-block>
 
     <demo-block title="可预览">
-      <wd-img :width="100" :height="100" :src="joy" :enable-preview="true" />
+      <view class="col">
+        <wd-img :width="100" :height="100" :src="joy" :enable-preview="true" />
+      </view>
+      <view class="col">
+        <wd-img :width="100" :height="100" :src="joy" :preview-src="img" :enable-preview="true" />
+      </view>
     </demo-block>
   </page-wraper>
 </template>

src/uni_modules/wot-design-uni/components/wd-img/types.ts

@@ -22,6 +22,10 @@ export const imgProps = {
    * 图片链接
    */
   src: String,
+  /**
+   * 预览图片链接
+   */
+  previewSrc: String,
   /**
    * 是否显示为圆形
    */

src/uni_modules/wot-design-uni/components/wd-img/wd-img.vue

@@ -73,7 +73,7 @@ function handleError(event: any) {
 function handleClick(event: MouseEvent) {
   if (props.enablePreview && props.src && status.value == 'success') {
     uni.previewImage({
-      urls: [props.src]
+      urls: [props.previewSrc || props.src]
     })
   }
   emit('click', event)