refactor(components): [image] image-viewer standalone use (#19715)

* chore: remove prevent body scroll in image-viewer

* docs: format

---------

Co-authored-by: warmthsea <2586244885@qq.com>

docs/en-US/component/image.md

@@ -57,7 +57,7 @@ image/image-preview
 
 ## Manually Open Preview ^(2.9.4)
 
-:::demo allow big image preview by call `showPreview` method.
+:::demo
 
 image/manually-preview
 

docs/examples/image/manually-preview.vue

@@ -1,13 +1,28 @@
 <template>
-  <div class="demo-image__manually-preview">
-    <el-button @click="handleClick">show image preview</el-button>
-    <el-image
-      ref="imageRef"
-      style="width: 100px; height: 100px"
-      :src="url"
-      :preview-src-list="srcList"
-      fit="cover"
-    />
+  <div class="flex gap-12">
+    <div class="grid gap-3">
+      <el-button @click="handleClick">
+        openPreview with showPreview method
+      </el-button>
+      <el-image
+        ref="imageRef"
+        style="width: 100px; height: 100px"
+        :src="url"
+        show-progress
+        :preview-src-list="srcList"
+        fit="cover"
+      />
+    </div>
+    <div>
+      <el-button @click="showPreview = true"> preview controlled </el-button>
+      <el-image-viewer
+        v-if="showPreview"
+        :url-list="srcList"
+        show-progress
+        :initial-index="4"
+        @close="showPreview = false"
+      />
+    </div>
   </div>
 </template>
 
@@ -28,17 +43,9 @@ const srcList = [
 ]
 
 const imageRef = ref<ImageInstance>()
+const showPreview = ref(false)
+
 const handleClick = () => {
   imageRef.value!.showPreview()
 }
 </script>
-
-<style scoped>
-.demo-image__manually-preview {
-  display: grid;
-  gap: 10px;
-}
-.demo-image__manually-preview .el-button {
-  width: fit-content;
-}
-</style>

packages/components/image-viewer/src/image-viewer.vue

@@ -153,6 +153,9 @@ defineOptions({
 const props = defineProps(imageViewerProps)
 const emit = defineEmits(imageViewerEmits)
 
+let stopWheelListener: (() => void) | undefined
+let prevOverflow = ''
+
 const { t } = useLocale()
 const ns = useNamespace('image-viewer')
 const { nextZIndex } = useZIndex()
@@ -223,6 +226,8 @@ const progress = computed(
 
 function hide() {
   unregisterEventListener()
+  stopWheelListener?.()
+  document.body.style.overflow = prevOverflow
   emit('close')
 }
 
@@ -390,6 +395,18 @@ function onCloseRequested() {
   }
 }
 
+function wheelHandler(e: WheelEvent) {
+  if (!e.ctrlKey) return
+
+  if (e.deltaY < 0) {
+    e.preventDefault()
+    return false
+  } else if (e.deltaY > 0) {
+    e.preventDefault()
+    return false
+  }
+}
+
 watch(currentImg, () => {
   nextTick(() => {
     const $img = imgRefs.value[0]
@@ -406,6 +423,14 @@ watch(activeIndex, (val) => {
 
 onMounted(() => {
   registerEventListener()
+
+  stopWheelListener = useEventListener('wheel', wheelHandler, {
+    passive: false,
+  })
+
+  // prevent body scroll
+  prevOverflow = document.body.style.overflow
+  document.body.style.overflow = 'hidden'
 })
 
 defineExpose({

packages/components/image/src/image.vue

@@ -87,8 +87,6 @@ defineOptions({
 const props = defineProps(imageProps)
 const emit = defineEmits(imageEmits)
 
-let prevOverflow = ''
-
 const { t } = useLocale()
 const ns = useNamespace('image')
 const rawAttrs = useRawAttrs()
@@ -117,7 +115,6 @@ const _scrollContainer = ref<HTMLElement | Window>()
 
 const supportLoading = isClient && 'loading' in HTMLImageElement.prototype
 let stopScrollListener: (() => void) | undefined
-let stopWheelListener: (() => void) | undefined
 
 const imageKls = computed(() => [
   ns.e('inner'),
@@ -214,36 +211,14 @@ function removeLazyLoadListener() {
   _scrollContainer.value = undefined
 }
 
-function wheelHandler(e: WheelEvent) {
-  if (!e.ctrlKey) return
-
-  if (e.deltaY < 0) {
-    e.preventDefault()
-    return false
-  } else if (e.deltaY > 0) {
-    e.preventDefault()
-    return false
-  }
-}
-
 function clickHandler() {
   // don't show viewer when preview is false
   if (!preview.value) return
-
-  stopWheelListener = useEventListener('wheel', wheelHandler, {
-    passive: false,
-  })
-
-  // prevent body scroll
-  prevOverflow = document.body.style.overflow
-  document.body.style.overflow = 'hidden'
   showViewer.value = true
   emit('show')
 }
 
 function closeViewer() {
-  stopWheelListener?.()
-  document.body.style.overflow = prevOverflow
   showViewer.value = false
   emit('close')
 }