계산된 스위치를 사용하여 CSS에서 v-img의 상위 속성 정의

Question

저는 v-img의 최고의 인기를 누리기 위해 최선을 다하고 있습니다.

我想这样义：

<v-img는 id="로고-투명"을 포함합니다. :top="로고Top" :너비="로고폭" :src="로고투명" class="hidden-xs-only"></v-img>

计算属性如下：

logoTop(){
            스위치(this.$vuetify.breakpoint.name) {
                케이스 'xl': "-4%"를 반환합니다.
                케이스 'lg': "-6%"를 반환합니다.
                케이스 'md': "-8%"를 반환합니다.
                케이스 'sm': "-8%"를 반환합니다.
                케이스 'xs': 0을 반환합니다.
                기본:
                    "-4%"를 반환합니다.
            }
        },

CSS如下：

#로고-투명{
  Z-색인: 1;
  너비: 400px;
  높이: 300px;
  위치: 절대;
  오른쪽: -1%;
}

但问题是v-img는 최고의 성능을 자랑합니다.

저희는 이러한 CSS를 사용하여 이미지를 정했습니다.

logoTop(){
            반품 {
                "--상위 속성" : 스위치(this.$vuetify.breakpoint.name) {
                                    'xl'의 경우: 400을 반환합니다.
                                    'lg'인 경우: 300을 반환합니다.
                                    'md'인 경우: 300을 반환합니다.
                                    케이스 'sm': 200을 반환합니다.
                                    케이스 'xs': 0을 반환합니다.
                                    기본:
                                        400을 반환
                                }
            }
            
        },

CSS中使의 응용 방법 아래:

top : var(--top-property)

但似乎我不能는 这种情况下使사용 스위치입니다.
내가 당신을 사랑하나요?

Answer 1

원래 logoTop计算属性可以在样式绑定中用于设置v-img的top 위치:

으아악

데모

Answer 2

switch아무 것도 반환하지 않습니다. 이와 같은 변수를 사용해야 합니다

으아악