vue - 이미지 확대(pinch-zoom)

웹앱 프로젝트를 진행 중 이미지 확대를 구현해야했고, 나중에도 손쉽게 하기위해 이곳에 기록한다.

 

1. 우선 의도하지 않은 확대를 막기 위해 index.html에 아래 소스를 추가 하였다.

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

user-scalable=no를 설정하게 되면 사용자가 화면을 확대할 수 없게 된다.

 

 

2. 이미지 확대를 위해 vue-pinch-zoom 라이브러리를 활용하였다.

2.1) vue-pinch-zoom 설치

npm i vue-pinch-zoom

 

2.2) 사용할 vue 파일에 import

import PinchZoom from 'vue-pinch-zoom'

2.3) component에 추가

<script>
import PinchZoom from 'vue-pinch-zoom'

export default {
  components: {
    pinchZoom: PinchZoom
  }
}
</script>

2.4) pinch-zoom 태그 사용

pinch-zoom 태그를 사용할때는 img 태그를 덮어줘 사용하면 된다.

아래 소스에 disable-zoom-control="disable" 설정을 하지 않으면 사용성이 떨어져 이와같은 설정을 추가 하였다.

<pinch-zoom disable-zoom-control="disable">
  <v-img
    width="100%"
    :src="imgUrl"
  />
</pinch-zoom>