With Vue again!

[bigZ-again]

If crop image be controlled by v-show, the width/height of container is wrong initially. If crop image be in v-if, it is OK. It's very simple and clear. I think it's none of vue-cropperjs's business.

《div id="wrapper"》 《input type='checkbox' v-model='showflag'》 《div v-show='showflag'》 《img id="cropImage" src='xxx.jpg'》 《img id="refImage" src='xxx.jpg'》 《/div》《/div》

var vm = new Vue({el: '#wrapper', data: { showflag: false }}) var image = document.getElementById('cropImage') var cropper = new Cropper(image)

[bigZ-again]

V-if 也不行，应该是Vue响应式的操作DOM时，和cronjs对DOM操作有冲突，vue-cropperjs也应该有问题，我估计问题的解决，需要仔细和Vue实例的生命周期相配合。而且使用时应该有注意事项，要避免某些情况，或者给出一些回避问题的解决办法或建议。

[crimx]

是的，你需要挂载到vue mounted的阶段

[bigZ-again]

v-show是通过 style="display:none"来控制是否显示的。 但实测发现当cropper被display:none之后，如果浏览器的窗口发生变化，再去掉display:none让其重新显示，这时cropperjs显示不正常。 也就是或cropperjs和display:none不兼容。 一个变通之道是用visibility:hidden来回避这个问题。

[bigZ-again]

这个issue应该可以关闭。原因是： The size of the cropper inherits from the size of the image's parent element (wrapper), so be sure to wrap the image with a visible block element.

但是，强烈建议在README.md中增加更清晰的说明，不用尝试用 v-if / v-show去控制它，而应该考虑用visibility:hidden来处理。