search

Agontuk / vue-cropperjs

A Vue wrapper component for cropperjs https://github.com/fengyuanchen/cropperjs
MIT License
935 stars 224 forks source link

Fixed img style definition #8

Closed mvrbanec closed 7 years ago

mvrbanec commented 7 years ago

At the moment, imgStyle is defined as a style attribute within attrs field inside VueCropper render function which causes rendering img style as [object Object] as demonstrated in the picture: object

This causes some unpredictable behaviour with the cropper.js lib. In my case, it caused the library to wrongly calculate the height of cropper-container div.

According to the Vue documentation, style as a top-level field can be defined as an object. However, if defined through attrs field, it should be a string instead. E.g.

attrs: {
  style: 'max-width: 100%'
}

This patch changes the above explained behaviour and defines style as a top-level field. It receives imgStyle prop if one is defined or defaults to { 'max-width': '100px' }. Example of the fixed behaviour can be seen in the picture below: fixed

Agontuk commented 7 years ago

Looks fine to me, but you're assigning max-width: 100% only when user does not pass anything. But I want that styling available no matter what the user passes. Second commit is fine, I'll do some checking on the first one. Thanks for noticing this.