使用計算開關在CSS中定義v-img的top屬性

Question

我想根據視窗的目前斷點定義v-img的top屬性。

我想這樣定義：

<v-img contain id="logo-transparent" :top="logoTop" :width="logoWidth"logoTop" :width="logoWidth" :src=" logoTransparent" class="hidden-xs-only"></v-img>

計算屬性如下：

logoTop(){
            switch (this.$vuetify.breakpoint.name) {
                case 'xl': return "-4%"
                case 'lg': return "-6%"
                case 'md': return "-8%"
                case 'sm': return "-8%"
                case 'xs': return 0
                default:
                    return "-4%"
            }
        },

CSS如下：

#logo-transparent{
  z-index: 1;
  width: 400px;
  height: 300px;
  position: absolute;
  right: -1%;
}

但問題是v-img沒有top屬性。

我想使用計算屬性來定義映像的CSS，如下所示：

logoTop(){
            return {
                "--top-property" : switch (this.$vuetify.breakpoint.name) {
                                    case 'xl': return 400
                                    case 'lg': return 300
                                    case 'md': return 300
                                    case 'sm': return 200
                                    case 'xs': return 0
                                    default:
                                        return 400
                                }
            }
            
        },

在CSS中使用它的方法如下：

<code>top : var(--top-property)
</code>

但似乎我不能在這種情況下使用switch。

我該如何做呢？

Answer 1

您原來的logoTop計算屬性可以在樣式綁定中用於設定v-img的top位置：

<template>
  <v-img :style="{ top: logoTop }" ... />
</template>

<script>
export default {
  computed: {
    logoTop() {
      switch (this.$vuetify.breakpoint.name) {
        case 'xl': return "-4%"
        case 'lg': return "-6%"
        case 'md': return "-8%"
        case 'sm': return "-8%"
        case 'xs': return 0
        default: return "-4%"
      }
    },
  }
}
</script>

示範

Answer 2

switch不回傳任何內容。你應該像這樣使用一個變數

logoTop() {
    let topProperty;
    switch (this.$vuetify.breakpoint.name) {
        case 'xl':
            topProperty =  400;
            break;
        case 'lg':
        case 'md':
            topProperty =  300;
            break;
        case 'sm':
            topProperty =  200;
            break;
        case 'xs':
            topProperty =  0;
            break;
        default:
            topProperty = 400;
    }
    return {
        "--top-property" : topProperty
    }
},