VueMagnifierPlus
Guide
Setting
Demo
Playground
  • English
  • zh-CN
GitHub
Guide
Setting
Demo
Playground
  • English
  • zh-CN
GitHub
  • Demo

    • Image
    • Canvas
    • Element
    • Swiper
    • Custom
    • Full
    • Mini map
    • Drag Selector

Full

<template>
  <vue-magnifier-plus
    url="/image.jpg"
    highUrl="/image-high.jpg"
    :width="selectWidth"
    :height="selectHeight"
    @update="handleUpdate"
  ></vue-magnifier-plus>
</template>

<script>
import VueMagnifierPlus from 'vue-magnifier-plus'
export default {
  components: {
    VueMagnifierPlus,
  },
  data() {
    return {
      selectWidth: 0,
      selectHeight: 0,
    }
  },
  methods: {
    handleUpdate(e) {
      this.selectWidth = e.width
      this.selectHeight = e.height
    },
  },
}
</script>
Contributors: Mater, haiweilian
Prev
Custom
Next
Mini map