vue.js mode for css

Question

我在另一个组件中使用并配置了这个BaseComponent，如下所示：

<BaseTitle
v-slot="{ highlightClass }"
:color="mode === 'faq' ? 'dark' : 'secondary'"
v-bind="__titleProps"
:text-uppercase="mode === 'incentive'"
highlight-type="colorize-uppercase-bold"
:class="{ 'font-weight-normal': mode === 'faq' }"
>

在这个元素上，我有一个css悬停类

.InfoTile {
&:hover {
.answer {
background-color: $transparent-primary;
opacity: 1;
}

.question {
opacity: 0;
}
}

当我使用"激励"；模式我需要使用另一种悬停背景颜色。有没有一种方法可以根据我使用的模式使用另一个悬停？

Answer 1

所以，这是完全可能的。

你只需要在正常模式和激励之间创建2个差异css类，就会有2个差异悬停，等等。

如果mode＝＝＝激励，您将进行一个条件项检查。

但是，您需要做的第一件事是在组件中设置多个类，您已经在使用一个了。

所以，就这样做吧。

:class="[{ 'font-weight-normal': mode === 'faq' }, mode === incentive ? 'cssClass1': 'cssClass2']"