一开始我是通过对比ref里面查到的宽高
this.$refs[XX].imageHeight和this.$refs[XX].imageWidth
图片稍微宽一点就把maxWidth设置为100%,稍窄一点就设置成75%
通过打印ref元素,是可以看到对象里面有以上两个属性的值 就像这样 this.$refs[XX]
但是单独打印:this.$refs[XX].imageWidth就显示为0
以为是元素还未加载完成,于是把以上的属性打印放入了this.$nextTick()里面,依然未果
没办法
试一下Image对象吧
const img = new Image()
打印出来看一下
console.log(img.width, '+++', img.height)
emmmmmm……依然是0
行吧 妥协 百度一下
说是加载问题
于是根据百度前人的方法
img.onload = function() { if (img.width < img.height) { obj.$el.style.maxWidth = '75%' } else { obj.$el.style.maxWidth = '100%' } }
放到上面那个onload里面
就ok辽~
快乐~~