Vuetify使用断点旋转设备时调整的转盘高度，v-carousel-项目高度更新，直到页面刷新

Question

当使用断点旋转设备时，轮播高度会更新以保持纵横比。

轮播高度被更新，但轮播项目高度保持不变，直到页面刷新。

我一直在尝试更新类v-window__container和v- carousel __item的高度，它们似乎是包含carousel图像的类，但我无法用js更新它们。

 computed: {
     carouselHeight () {
          switch (this.$vuetify.breakpoint.name) {
            case 'xs' : return '198'
            case 'sm' : return '375'
            case 'md' : return '520'
            case 'lg' : return '620'
            case 'xl' : return '1020'
          }

        }

https://codepen.io/waco/full/XoBRJp

我也尝试过更新类。

 computed: {
     carouselHeight () {
          switch (this.$vuetify.breakpoint.name) {
            case 'xs' : 
                document.getElementsByClassName('v-window__container').height = '198px';
                return '198';
            case 'sm' : 
                document.getElementsByClassName('v-window__container').height = '375px';
                return '375'
            case 'md' : return '520'
            case 'lg' : return '620'
            case 'xl' : return '1020'
          }

        }

我希望当设备旋转而不刷新页面时，轮播图像也会更新。

Answer 1

我设法通过使用JQuery更改轮播项目的高度来解决这个问题。

computed: {        
    carouselHeight () {

        var x = document.getElementsByClassName("v-window__container");

        switch (this.$vuetify.breakpoint.name) {

            case 'xs' : 

                if (x.length > 0) { $(".v-carousel__item").css({"height" : "198px"}) }                    
                return '198px';

            case 'sm' : 

                if (x.length > 0) { $(".v-carousel__item").css({"height" : "375px"}) }
                return '375px';

            case 'md' : 

                if (x.length > 0) { $(".v-carousel__item").css({"height" : "520px"}) }
                return '520px';

            case 'lg' : 

                if (x.length > 0) { $(".v-carousel__item").css({"height" : "620px"}) }                            
                return '620px';

            case 'xl' : 

                if (x.length > 0) { $(".v-carousel__item").css({"height" : "1020px"}) }    
                return '1020px';
        }                                     
    }