feat: ✨ img组件增加enable-preview属性来支持点击预览功能

✅ Closes: #193

Author: jasper-ops

docs/component/img.md

@@ -58,6 +58,19 @@ mode为小程序原生属性，参考[微信小程序image官方文档](https://
 />
 ```
 
+## 可预览
+
+通过设置`enable-preview`属性可以支持点击预览，底层调用uni.previewImage来实现预览效果
+
+```html
+<wd-img
+  :width="100"
+  :height="100"
+  :src="joy"
+  :enable-preview="true"
+/>
+```
+
 ## Attributes
 
 | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
@@ -68,6 +81,7 @@ mode为小程序原生属性，参考[微信小程序image官方文档](https://
 | mode | 填充模式 | string | 'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill' | 'scaleToFill' | - |
 | round | 是否显示为圆形 | boolean | - | false | - |
 | radius | 圆角大小，默认单位为px | number / string | - | - | - |
+| enable-preview | 是否支持点击预览 | boolean | - | false | - |
 
 ## Events
 

src/pages/img/Index.vue

@@ -3,7 +3,7 @@
  * @Date: 2023-11-02 18:57:41
  * @LastEditTime: 2023-11-02 19:02:24
  * @LastEditors: weisheng
- * @Description: 
+ * @Description:
  * @FilePath: \wot-design-uni\src\pages\img\Index.vue
  * 记得注释
 -->
@@ -32,6 +32,10 @@
         <view class="center">{{ mode }}</view>
       </view>
     </demo-block>
+
+    <demo-block title="可预览">
+      <wd-img :width="100" :height="100" :src="joy" :enable-preview="true" />
+    </demo-block>
   </page-wraper>
 </template>
 <script lang="ts" setup>

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

@@ -30,5 +30,9 @@ export const imgProps = {
   /**
    * 圆角大小，默认单位为px
    */
-  radius: numericProp
+  radius: numericProp,
+  /**
+   * 是否允许预览
+   */
+  enablePreview: makeBooleanProp(false)
 }

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

@@ -46,6 +46,11 @@ function handleError(event: Event) {
   emit('error', event)
 }
 function handleClick() {
+  if (props.enablePreview && props.src) {
+    uni.previewImage({
+      urls: [props.src]
+    })
+  }
   emit('click')
 }
 function handleLoad(event: Event) {