Define the top attribute of v-img in CSS using calculated switches
P粉704196697
2023-08-30 23:50:32
<p>I want to define the top attribute of v-img based on the current breakpoint of the window. </p>
<p>I want to define it like this:</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>The calculated properties are as follows:</p>
<pre class="brush:php;toolbar:false;">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%"
}
},</pre>
<p>The CSS is as follows:</p>
<pre class="brush:php;toolbar:false;">#logo-transparent{
z-index: 1;
width: 400px;
height: 300px;
position: absolute;
right: -1%;
}</pre>
<p>But the problem is that v-img does not have a top attribute. </p>
<p>I want to use computed properties to define the CSS of an image like this: </p>
<pre class="brush:php;toolbar:false;">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
}
}
},</pre>
<p>Use it in CSS as follows: </p>
<pre class="lang-css prettyprint-override"><code>top : var(--top-property)
</code></pre>
<p>But it seems I can't use switch in this case. </p>
<p>What should I do? </p>
Your original
logoTop
computed property can be used in style bindings to set thetop
position ofv-img
:Demo
switch
Returns nothing. You should use a variable like this