Tentukan atribut teratas v-img dalam CSS menggunakan suis yang dikira

Question

我想根据窗口的当前断点定义v-img的top属性。

我想这样定义：

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

计算属性如下：

logoTop(){
            suis (this.$vuetify.breakpoint.name) {
                kes 'xl': kembalikan "-4%"
                kes 'lg': kembalikan "-6%"
                kes 'md': kembalikan "-8%"
                kes 'sm': kembalikan "-8%"
                kes 'xs': pulangkan 0
                lalai:
                    pulangkan "-4%"
            }
        },

CSS如下：

#logo-transparent{
  indeks-z: 1;
  lebar: 400px;
  ketinggian: 300px;
  jawatan: mutlak;
  kanan: -1%;
}

但问题是v-img没有 atas属性。

我想使用计算属性来定义图像的CSS，如下所示：

logoTop(){
            kembali {
                "--harta atasan" : suis (this.$vuetify.breakpoint.name) {
                                    kes 'xl': pulangkan 400
                                    kes 'lg': pulangkan 300
                                    kes 'md': pulangkan 300
                                    kes 'sm': pulangkan 200
                                    kes 'xs': pulangkan 0
                                    lalai:
                                        pulangan 400
                                }
            }
            
        },

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

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

但似乎我不能在这种情况下使用suis。

我该如何做呢？

Answer 1

Lokasi logoTop计算属性可以在样式绑定中用于设置v-img的top asal anda:

<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>

Demo

Answer 2

switch Tiada pulangan. Anda harus menggunakan pembolehubah seperti ini

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
    }
},