Merge pull request #4071 from n-kegra/feat/ui-image-viewer

画像モーダルの挙動の変更
traPtitech · Oct 10, 2023 · bc92c73 · bc92c73
2 parents 7f54b7b + 5bef282
commit bc92c73
Show file tree

Hide file tree

Showing 2 changed files with 235 additions and 136 deletions.
diff --git a/src/components/UI/ImageViewer.vue b/src/components/UI/ImageViewer.vue
@@ -2,6 +2,7 @@
   <div ref="containerEle" :class="$style.container">
     <div :class="$style.imgContainer" :style="styles.imgContainer">
       <img
+        ref="imgEle"
         :src="src"
         :alt="alt"
         :class="$style.img"
@@ -22,8 +23,9 @@ defineProps<{
 }>()
 
 const containerEle = ref<HTMLDivElement>()
+const imgEle = ref<HTMLImageElement>()
 
-const { styles } = useImageViewer(containerEle)
+const { styles } = useImageViewer(containerEle, imgEle)
 </script>
 
 <style lang="scss" module>
@@ -32,9 +34,6 @@ const { styles } = useImageViewer(containerEle)
   overflow: hidden;
 }
 .imgContainer {
-  position: absolute;
-  top: 50%;
-  left: 50%;
   height: 100%;
   width: 100%;
   user-select: none;