Définir l'attribut supérieur de v-img en CSS à l'aide de commutateurs calculés

Question

我想这样定义：

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

计算属性如下：

logoTop(){
            commutateur (this.$vuetify.breakpoint.name) {
                cas 'xl' : retour "-4%"
                cas 'lg' : retour "-6%"
                cas 'md' : retour "-8%"
                cas 'sm' : retour "-8%"
                cas 'xs' : renvoie 0
                défaut:
                    retour "-4%"
            }
        },</pré>
<p>CSS如下：</p>
<pre class="brush:php;toolbar:false;">#logo-transparent{
  indice z : 1 ;
  largeur : 400 px ;
  hauteur : 300px ;
  position : absolue ;
  à droite : -1% ;
}</pré>
<p>但问题是v-img没有top属性。</p>
<p>
<pre class="brush:php;toolbar:false;">logoTop(){
            retour {
                "--propriété supérieure" : commutateur (this.$vuetify.breakpoint.name) {
                                    cas 'xl' : renvoie 400
                                    cas 'lg' : renvoie 300
                                    cas 'md' : renvoie 300
                                    cas 'sm' : renvoie 200
                                    cas 'xs' : renvoie 0
                                    défaut:
                                        retour 400
                                }
            }
            
        },</pré>
<p>在CSS中使用它的方法如下：</p>
<pre class="lang-css Prettyprint-override"><code>top : var(--top-property)
</code>

我该如何做呢？

Answer 1

Votre logoTop计算属性可以在样式绑定中用于设置v-img的topemplacement d'origine :

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

Démo

Answer 2

switchNe retournez rien. Vous devriez utiliser une variable comme celle-ci

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