Question

轮播的高度已更新，以在使用断点旋转设备时保持宽高比。

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

我一直在尝试更新类v-window__container和v-carousel__item的高度，这些类似乎是包含轮播图像的类，但是我无法使用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';
        }                                     
    }

当使用断点旋转设备时调整Vuetify轮播的高度，更新v轮播的物品的高度，直到刷新页面

1 个答案: