Définir l'attribut supérieur de v-img en CSS à l'aide de commutateurs calculés
P粉704196697
P粉704196697 2023-08-30 23:50:32
0
2
504
<p> <p>我想这样定义:</p> <pre class="brush:php;toolbar:false;"><v-img contain id="logo-transparent" :top="logoTop" :width="logoWidth" :src="logoTransparent" class="hidden-xs-only"></v-img></pre> <p>计算属性如下:</p> <pre class="brush:php;toolbar:false;">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></pre> <p> <p>我该如何做呢?</p>
P粉704196697
P粉704196697

répondre à tous(2)
P粉300541798

Votre logoTop计算属性可以在样式绑定中用于设置v-imgtopemplacement 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

P粉462328904

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal