fix 优化图片上传只读阅读显示

@@ -59,6 +59,7 @@ declare module '@vue/runtime-core' {
     VanForm: typeof import('vant/es')['Form']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
+    VanImagePreview: typeof import('vant/es')['ImagePreview']
     VanLoading: typeof import('vant/es')['Loading']
     VanNoticeBar: typeof import('vant/es')['NoticeBar']
     VanNumberKeyboard: typeof import('vant/es')['NumberKeyboard']

 <!--
  * @Date: 2022-08-31 16:16:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-14 15:01:13
+ * @LastEditTime: 2024-06-17 09:31:57
  * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
  * @Description: 图片上传控件
 -->
@@ -57,6 +57,10 @@
       <van-loading vertical color="#FFFFFF">上传中...</van-loading>
     </div>
   </van-overlay>
+
+  <van-image-preview v-model:show="show" :images="default_list" @change="onChange">
+    <template v-slot:index>第{{ index + 1 }}张</template>
+  </van-image-preview>
 </template>
 
 <script setup>
@@ -356,13 +360,15 @@ const validImageUploader = () => {
 
 // 预览只读图片
 const onImgClick = (i) => {
-  // showImagePreview({
-  //   images: default_list.value,
-  //   startPosition: i,
-  //   className: "my-image-preview",
-  // });
+  show.value = true
 }
 
+const show = ref(false);
+const index = ref(0);
+const onChange = (newIndex) => {
+  index.value = newIndex;
+};
+
 defineExpose({ validImageUploader });
 </script>