getImg(src){
  var img_url  =src
  var img = new Image()
  img.src=img_url
  this.pictureHeight.height = Math.ceil(img.height/img.width * 460)+'px'
},
//首先通过这个方法算出图片的高度/宽度比,460是我设置的宽度,计算得出需要的高度,然后修改容器的高
//度,图片通过height:100%;width:100%撑开,这样图片就不会失真了

vue里面还有一个问题,如果容器只是div的话,修改容器高度,非常简单,如果容器是一个element的插件的话,一般容器的样式都可以通过:style="styleModel"来绑定一个data中的属性styleModel:{height:100px;}这样的方式来修改,当然如果遇到一些比较复杂的样式调整,也可以通过$refs来修改样式,,但是这样又会出现一个问题,就是$refs定位到的ref属性必须要组件完全加载完成后才能显示出来,所以一般会用this.$nextTick(function(){})的包装起来。这个方法包装起来后的好处是,会在DOM更新完成后执行这里面的方法,这样就不用担心$refs获取不到的问题了。

        this.$nextTick(function(){
        //  this.$refs.test.$el.childNodes[0].style.height=this.pictureHeight.height
          document.getElementsByClassName('el-carousel__container')[0].style.height=this.pictureHeight.height
        })

//现在就是通过这两种比较通用的js方式来操作属性了

 

Logo

前往低代码交流专区

更多推荐