FaImagePreview 组件函数式调用增加多图支持

Author: hooray

src/ui/components/FaImagePreview/index.ts

@@ -1,13 +1,14 @@
 import Preview from './preview.vue'
 
 export function useFaImagePreview() {
-  function open(src: string) {
+  function open(src: string | string[], index = 0) {
     const container = document.createElement('div')
     const app = createApp({
       render() {
         return h(Preview, {
           modelValue: true,
           src,
+          index,
         })
       },
     })

src/ui/components/FaImagePreview/preview.vue

@@ -1,12 +1,35 @@
 <script setup lang="ts">
 import { Dialog, DialogContent } from './dialog'
 
-defineProps<{
-  src: string
+const props = defineProps<{
+  src: string | string[]
+  index?: number
 }>()
 
 const isOpen = defineModel<boolean>()
 
+// 多图操作
+const index = ref(props.index ?? 0)
+const srcList = computed(() => {
+  if (Array.isArray(props.src)) {
+    return props.src
+  }
+  return [props.src]
+})
+function handlePrev() {
+  index.value = index.value - 1
+  if (index.value < 0) {
+    index.value = srcList.value.length - 1
+  }
+}
+function handleNext() {
+  index.value = index.value + 1
+  if (index.value >= srcList.value.length) {
+    index.value = 0
+  }
+}
+watch(index, resetImageState)
+
 // 图片操作相关状态
 const scale = ref(1)
 const rotate = ref(0)
@@ -101,7 +124,7 @@ function handleAnimationEnd() {
     <DialogContent class="size-full" @animation-end="handleAnimationEnd">
       <div class="relative size-full flex-center" @wheel="handleWheel">
         <img
-          :src="src"
+          :src="srcList[index]"
           class="mx-auto max-h-full max-w-full object-contain"
           :class="{
             'transition-all duration-300': !isDragging,
@@ -112,6 +135,17 @@ function handleAnimationEnd() {
           }"
           @mousedown.prevent="handleMouseDown"
         >
+        <template v-if="srcList.length > 1">
+          <div class="absolute bottom-20 left-1/2 text-sm text-muted-foreground -translate-x-1/2">
+            {{ index + 1 }} / {{ srcList.length }}
+          </div>
+          <FaButton variant="ghost" size="icon" class="absolute left-4 top-1/2 rounded-full bg-muted/50 -translate-y-1/2" @click="handlePrev">
+            <FaIcon name="i-lucide:chevron-left" class="size-6" />
+          </FaButton>
+          <FaButton variant="ghost" size="icon" class="absolute right-4 top-1/2 rounded-full bg-muted/50 -translate-y-1/2" @click="handleNext">
+            <FaIcon name="i-lucide:chevron-right" class="size-6" />
+          </FaButton>
+        </template>
         <FaButtonGroup class="absolute bottom-4 left-1/2 scale-125 -translate-x-1/2">
           <FaButton variant="outline" size="icon" class="border-none bg-muted/50" @click="handleZoomIn">
             <FaIcon name="i-carbon:zoom-in" class="size-5" />

src/views/component_built_in_example/imagepreview.vue

@@ -6,8 +6,24 @@ meta:
 <script setup lang="ts">
 import { useFaImagePreview } from '@/ui/components/FaImagePreview'
 
-function open() {
-  useFaImagePreview().open('https://fantastic-admin.hurui.me/logo.svg')
+const { open } = useFaImagePreview()
+
+function openSingle() {
+  open('https://fantastic-admin.hurui.me/logo.svg')
+}
+
+function openMulti() {
+  open([
+    'https://fantastic-admin.hurui.me/logo.svg',
+    'https://fantastic-mobile.hurui.me/logo.png',
+  ])
+}
+
+function openMulti2() {
+  open([
+    'https://fantastic-admin.hurui.me/logo.svg',
+    'https://fantastic-mobile.hurui.me/logo.png',
+  ], 1)
 }
 </script>
 
@@ -33,9 +49,17 @@ function open() {
       </div>
     </FaPageMain>
     <FaPageMain title="函数式调用">
-      <FaButton @click="open">
-        预览
-      </FaButton>
+      <div class="space-x-4">
+        <FaButton @click="openSingle">
+          预览单张
+        </FaButton>
+        <FaButton @click="openMulti">
+          预览多张
+        </FaButton>
+        <FaButton @click="openMulti2">
+          预览多张（初始预览第2张）
+        </FaButton>
+      </div>
     </FaPageMain>
   </div>
 </template>