일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- vps
- 아두이노
- c#
- 자동글쓰기
- 챗지피티
- 자바스크립트
- 아두이노 기초강좌
- 워드프레스
- 아두이노 강좌
- cocos2d-x
- 쿠팡파트너스
- HTML
- 파이썬
- 자동포스팅
- 파싱
- 가상서버
- 그누보드
- 프로그램
- Python
- ChatGPT
- 자동블로그
- php
- vultr
- Php공부
- 아두이노 초보
- 무료일러스트
- Javascript
- Ajax
- flex
- 웹
Archives
- Today
- Total
플밍
클릭하면 크게 볼 수 있는 이미지뷰어 본문
<template>
<div class="img-viewer">
<img
:src="src"
ref="img"
class="origin"
@mousedown="isDrag=true"
@mouseup="isDrag=false"
@mousemove="moveImage"
draggable="false"
/>
<img class="btn-close" src="@/assets/icons/close.svg" @click="doClose" />
</div>
</template>
<script>
export default {
props: {
src: {
type: String,
required: true,
},
},
data() {
return {
isDrag: false,
startPos: { x: 0, y: 0 },
}
},
mounted() {
this.resizeImage()
const img = this.$refs.img
img.addEventListener('touchstart', this.startHandler)
img.addEventListener('touchmove', this.moveHandler)
img.addEventListener('touchend', this.endHandler)
img.addEventListener('mousedown', this.startHandler)
img.addEventListener('mousemove', this.moveHandler)
img.addEventListener('mouseup', this.endHandler)
const body = document.querySelector('body')
img.addEventListener('load', () => {
img.style.left = `${body.clientWidth / 2 - img.clientWidth / 2}px`
img.style.top = `${body.clientHeight / 2 - img.clientHeight / 2}px`
})
},
methods: {
getPos(event) {
let x = 0
let y = 0
if (event.touches !== undefined) {
x = event.touches[0].clientX
y = event.touches[0].clientY
} else {
x = event.clientX
y = event.clientY
}
return {
x: x,
y: y,
}
},
startHandler(event) {
const bound = this.$refs.img.getBoundingClientRect()
this.startPos = this.getPos(event)
this.startPos.x -= bound.left
this.startPos.y -= bound.top
this.isDrag = true
},
moveHandler(event) {
if (!this.isDrag) return
const pos = this.getPos(event)
this.$refs.img.style.left = `${pos.x - this.startPos.x}px`
this.$refs.img.style.top = `${pos.y - this.startPos.y}px`
},
endHandler(event) {
this.isDrag = false
},
resizeImage() {
const body = document.querySelector('body')
const w = body.offsetWidth
const h = body.offsetHeight
},
moveImage(event) {
const ele = event.target
},
doClose() {
this.$emit('close')
},
},
}
</script>
<style lang="scss" scoped>
.img-viewer {
width: 100%;
height: 100%;
border: 2px solid #000;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
img.origin {
position: absolute;
-ms-user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
}
img.btn-close {
display: block;
width: 40px;
height: 40px;
border: 2px solid #000;
background-color: #fff;
position: absolute;
top: 1rem;
right: 1rem;
}
}
</style>
아이콘
사용법 예시
<template>
<img :src="rowData.photo" />
<image-viewer v-if="showImage" :src="rowData.photo" @close="showImage=false" />
</template>
<script>
import ImageViewer from '@/components/widgets/image-viewer'
export default {
components: {
ImageViewer,
},
data() {
return {
rowData: {
photo: 'http://..../img.jpg',
},
showImage: false,
},
},
}
</script>
Comments