我想根据窗口的当前断点定义v-img的top属性。
我想这样定义：
<v-img contain id="logo-transparent" :top="logoTop" :width="logoWidth" :src="logoTransparent" class="hidden-xs-only"></v-img>
计算属性如下：
2
907logoTop(){
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中使用它的方法如下：
top : var(--top-property)
但似乎我不能在这种情况下使用switch。
我该如何做呢？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
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 } },