計算されたスイッチを使用してCSSでv-imgのtop属性を定義する
<p>ウィンドウの現在のブレークポイントに基づいて v-img の top 属性を定義したいと考えています。 </p>
<p>次のように定義したいと思います:</p>
<pre class="brush:php;toolbar:false;"><v-img contains 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(){
switch (this.$vuetify.breakpoint.name) {
'xl' の場合: 「-4%」を返します。
ケース 'lg': 「-6%」を返します。
case 'md': "-8%" を返します。
ケース 'sm': 「-8%」を返します。
'xs' の場合: 0 を返す
デフォルト：
返品「-4%」
}
},</pre>
<p>CSS は次のとおりです。</p>
<pre class="brush:php;toolbar:false;">#logo-transparent{
z インデックス: 1;
幅: 400ピクセル;
高さ: 300ピクセル;
位置: 絶対;
右: -1%;
}</pre>
<p>しかし問題は、v-img には top 属性がないことです。 </p>
<p>計算されたプロパティを使用して、次のような画像の CSS を定義したいと考えています。 </p>
<pre class="brush:php;toolbar:false;">logoTop(){
戻る {
"--top-property" : switch (this.$vuetify.breakpoint.name) {
ケース 'xl': 400 を返します
ケース 'lg': 300 を返します
ケース 'md': 300 を返します
ケース 'sm': 200 を返します
'xs' の場合: 0 を返す
デフォルト：
400を返す
}
}
},</pre>
<p>次のように CSS で使用します。 </p>
<pre class="lang-css prettyprint-override"><code>top : var(--top-property)
</code></pre>
<p>しかしこの場合switchは使えないようです。 </p>
<p>どうすればいいですか? </p>
