图片上传组件默认值和只读显示

 <!--
  * @Date: 2022-08-31 16:16:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-03-29 18:04:07
+ * @LastEditTime: 2024-06-06 16:50:41
  * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
  * @Description: 图片上传控件
 -->
@@ -16,6 +16,7 @@
       v-html="item.component_props.note"
       style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem; white-space: pre-wrap;"
     />
+    <div v-if="!item.component_props.readonly">
       <div style="padding: 1rem">
         <van-uploader
           :name="item.name"
@@ -35,6 +36,17 @@
       >
         图片上传不能为空
       </div>
+    </div>
+    <div v-else style="padding: 1rem">
+      <van-image
+      v-for="(item, index) in default_list" :key="index"
+      @click="onImgClick(index)"
+        width="100"
+        height="100"
+        :src="item"
+        style="margin-right: 0.5rem; margin-block-end: 0.25rem;"
+      />
+    </div>
     <van-divider />
   </div>
 
@@ -52,7 +64,7 @@
  * @param image_type[Array] 图片上传类型
  * @param multiple[Boolean] 图片多选
  */
-import { showSuccessToast, showFailToast, showToast } from "vant";
+import { showSuccessToast, showFailToast, showToast, showImagePreview } from "vant";
 import _ from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
@@ -65,10 +77,29 @@ const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
+
 // 隐藏显示
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
+});
+// 默认图片列表
+const default_tmp = [{
+  name : "92C3D730-CB73-40DD-AB1F-E86A159D2F11.png",
+  url : "https://cdn.ipadbiz.cn/uploadForm/kibnjo/91b15c62bc3d002fb1c2dd2023648376.png"
+}, {
+  name : "92C3D730-CB73-40DD-AB1F-E86A159D2F11.png",
+  url : "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+}];
+const default_list = ref([]);
+
+onMounted(() => {
+  // TODO: 没有默认的default字段
+  if (default_tmp.length) {
+    default_list.value = default_tmp.map(item => item.url)
+    console.log("🚀 ~ file: index.vue:97 ~ onMounted ~ default_list.value :", default_list.value );
+  }
 })
+
 const emit = defineEmits(["active"]);
 const show_empty = ref(false);
 
@@ -328,6 +359,14 @@ const validImageUploader = () => {
   return !show_empty.value;
 };
 
+// 预览只读图片
+const onImgClick = (i) => {
+  showImagePreview({
+    images: default_list.value,
+    startPosition: i,
+  });
+}
+
 defineExpose({ validImageUploader });
 </script>