Bug: Pointer Box always stays at the lower right corner

[sam-ngu]

vue & vue-h-zoom version

2.0.x, x.y.z

Thanks for making this wonderful component! Everything works fine for me except the pointer box =( However I've found a solution.

Resolution

In the 'updateThumbnailPos' method you define the thumbnailPos top and left property by using 'offsetTop' and 'offsetLeft'. However these are relative to the parent. After changing the updateThumbnailPos method into this:

updateThumbnailPos: function () {
                const el = this.$refs.thumbnail;
                let elementDim = el.getBoundingClientRect();
                this.thumbnailPos = {
                    top: elementDim.top,
                    left: elementDim.left,
                }

            }

Everything started to work.

[usolved]

I had the same issue and this solved it for me. Thanks!

[nilay-patel-9spl]

Addition to @sam-ngu's solution. Instead of changing the vue-h-zoom.js I used the following code:

import VueHZoom from 'vue-h-zoom'; Vue.use(VueHZoom); Vue.component('originalVueZoom', VueHZoom); const newZoom = Vue.component('originalVueZoom').extend({ methods: { updateThumbnailPos: function () { const el = this.$refs.thumbnail; let elementDim = el.getBoundingClientRect(); this.thumbnailPos = { top: elementDim.top, left: elementDim.left, } } } }); export default { components: { VueHZoom:newZoom } }

[robertnicjoo]

@sam-ngu hi how did you solved it? where is this this.$refs.thumbnail; defined? having same issue with no luck so far :/

[sam-ngu]

@robertnicjoo look it up in the source code :)