Vue picture magnifying glass
English | 简体中文
npm install vue-photo-zoom-pro
import vuePhotoZoomPro from 'vue-photo-zoom-pro'
import vuePhotoZoomPro from 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'
export default {
components: {
vuePhotoZoomPro
}
}
or cdn
<script src="https://cdn.jsdelivr.net/npm/vue-photo-zoom-pro/dist/vue-photo-zoom-pro.global.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css" />
new Vue({
el: '#app',
components: {
vuePhotoZoomPro: VuePhotoZoomPro
}
}
<vue-photo-zoom-pro :high-url="imgSrc">
<img :src="imgSrc" />
</vue-photo-zoom-pro>
Tips: If your image is not loaded at the beginning and set
disabled-reactive
, you must manually listen for the event when the image is loaded before displaying it
<vue-photo-zoom-pro v-if="loaded" :high-url="imgSrc" disabled-reactive>
<img :src="imgSrc" />
</vue-photo-zoom-pro>
export deafult{
data(){
return {
loaded: false,
imgSrc: ''
}
},
created(){
const img = new Image()
img.src = imgSrc
img.addEventListener('load', ()=>{
this.loaded = true
})
}
}
You can use any element to represent the enlarged area
<vue-photo-zoom-pro :high-url="imgSrc">
<div style="width:100px; height: 200px"></div>
</vue-photo-zoom-pro>
<vue-photo-zoom-pro>
<template slot="zoomer">
<!-- Is the same as the canvas-1 -->
<canvas id="canvas-2" width="100" height="100"></canvas>
</template>
<canvas id="canvas-1" width="100" height="100"></canvas>
</vue-photo-zoom-pro>
const canvas1 = document.querySelector('#canvas-1')
const canvas2 = document.querySelector('#canvas-2')
const ctx1 = canvas1.getContext('2d')
const ctx2 = canvas2.getContext('2d')
const offscreenCanvas = document.createElement('canvas')
const ctx = offscreenCanvas.getContext('2d')
offscreenCanvas.width = 100
offscreenCanvas.height = 100
ctx.font = '30px Arial'
ctx.fillText('Hello World', 10, 50)
ctx1.drawImage(offscreenCanvas, 0, 0)
ctx2.drawImage(offscreenCanvas, 0, 0)
Prop Name | Type | Default | Note |
---|---|---|---|
high-url | String | Clearer picture url | |
scale | Number | 2 | magnification |
disabled | Boolean | false | disabled move |
width | Number | 166 | The width of the magnified area |
height | Number | -1 | The height of the magnified area |
type | String | square | magnifying glass type (circle,square) |
selector | Boolean | true | show or remove selector |
out-zoomer | Boolean | false | amplification region will be displayed on the outside |
mask | Boolean | false | show mask |
mask-color | Color | rgba(0,0,0,0.4) | mask color |
enter-event | Object/UIEvent | null | custom enter event |
move-event | Object/UIEvent | null | custom move event |
leave-event | Object/UIEvent | null | custom leave event |
disabled-reactive | Boolean | false | Disable listening for internal element info changes |
Slot Name | Note |
---|---|
default | default slot |
selector | selector slot |
zoomer | inner zoomer slot |
outzoomer | out zoomer slot |
Event Name | Note | value |
---|---|---|
created | created event | |
mouseenter | mouse enter event | |
mousemove | mouse move event | |
mouseleave | mouse leave event |
Method Name | Note | value |
---|---|---|
update | update |
# install dependencies
npm install
# serve with hot reload at localhost:5000
npm run dev & npm run serve
# build for production with minification
npm run build
Copyright (c) 2018-present, mater1996