vue根據圖片的寬高改變圖片的顯示比例，通過ref

一開始我是通過對比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遼~

快樂~~