Showing
2 changed files
with
13 additions
and
6 deletions
| ... | @@ -59,6 +59,7 @@ declare module '@vue/runtime-core' { | ... | @@ -59,6 +59,7 @@ declare module '@vue/runtime-core' { |
| 59 | VanForm: typeof import('vant/es')['Form'] | 59 | VanForm: typeof import('vant/es')['Form'] |
| 60 | VanIcon: typeof import('vant/es')['Icon'] | 60 | VanIcon: typeof import('vant/es')['Icon'] |
| 61 | VanImage: typeof import('vant/es')['Image'] | 61 | VanImage: typeof import('vant/es')['Image'] |
| 62 | + VanImagePreview: typeof import('vant/es')['ImagePreview'] | ||
| 62 | VanLoading: typeof import('vant/es')['Loading'] | 63 | VanLoading: typeof import('vant/es')['Loading'] |
| 63 | VanNoticeBar: typeof import('vant/es')['NoticeBar'] | 64 | VanNoticeBar: typeof import('vant/es')['NoticeBar'] |
| 64 | VanNumberKeyboard: typeof import('vant/es')['NumberKeyboard'] | 65 | VanNumberKeyboard: typeof import('vant/es')['NumberKeyboard'] | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-08-31 16:16:49 | 2 | * @Date: 2022-08-31 16:16:49 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2024-06-14 15:01:13 | 4 | + * @LastEditTime: 2024-06-17 09:31:57 |
| 5 | * @FilePath: /data-table/src/components/ImageUploaderField/index.vue | 5 | * @FilePath: /data-table/src/components/ImageUploaderField/index.vue |
| 6 | * @Description: 图片上传控件 | 6 | * @Description: 图片上传控件 |
| 7 | --> | 7 | --> |
| ... | @@ -57,6 +57,10 @@ | ... | @@ -57,6 +57,10 @@ |
| 57 | <van-loading vertical color="#FFFFFF">上传中...</van-loading> | 57 | <van-loading vertical color="#FFFFFF">上传中...</van-loading> |
| 58 | </div> | 58 | </div> |
| 59 | </van-overlay> | 59 | </van-overlay> |
| 60 | + | ||
| 61 | + <van-image-preview v-model:show="show" :images="default_list" @change="onChange"> | ||
| 62 | + <template v-slot:index>第{{ index + 1 }}张</template> | ||
| 63 | + </van-image-preview> | ||
| 60 | </template> | 64 | </template> |
| 61 | 65 | ||
| 62 | <script setup> | 66 | <script setup> |
| ... | @@ -356,13 +360,15 @@ const validImageUploader = () => { | ... | @@ -356,13 +360,15 @@ const validImageUploader = () => { |
| 356 | 360 | ||
| 357 | // 预览只读图片 | 361 | // 预览只读图片 |
| 358 | const onImgClick = (i) => { | 362 | const onImgClick = (i) => { |
| 359 | - // showImagePreview({ | 363 | + show.value = true |
| 360 | - // images: default_list.value, | ||
| 361 | - // startPosition: i, | ||
| 362 | - // className: "my-image-preview", | ||
| 363 | - // }); | ||
| 364 | } | 364 | } |
| 365 | 365 | ||
| 366 | +const show = ref(false); | ||
| 367 | +const index = ref(0); | ||
| 368 | +const onChange = (newIndex) => { | ||
| 369 | + index.value = newIndex; | ||
| 370 | +}; | ||
| 371 | + | ||
| 366 | defineExpose({ validImageUploader }); | 372 | defineExpose({ validImageUploader }); |
| 367 | </script> | 373 | </script> |
| 368 | 374 | ... | ... |
-
Please register or login to post a comment