有一个图标，上面有一个通知点，是为通知的颜色绘制的。
通知有三种类型：成功-绿色，警告-橙子，错误-红色。2通知按优先级着色，绿色低-红色高。
例如，如果有警告消息，则铃声将始终显示为橙子，即使随后出现成功消息。如果有错误消息，则铃声将始终显示为红色，即使随后出现成功消息或警告消息。
在这段代码中，铃铛是按优先级着色的，但是如果三个不同的通知都到来了，那么所有的类都在标记中可见，但是具有优先级的类就不可见了：
<button>
<span
class="Icon name_notification"
:class="iconClasses"
></span>
</button>
computed: {
iconClasses() {
const {
notifications,
} = this;
return {
indication: !!notifications.length,
'has-success': notifications.findIndex(({options}) => options.type === 'success') !== -1,
'has-warning': notifications.findIndex(({options}) => options.type === 'warning') !== -1,
'has-error': notifications.findIndex(({options}) => options.type === 'error') !== -1,
};
},
}问题是，在html标记中，你可以看到开发者控制台，如果有2，3个不同的通知到来，所有的类都会被呈现，标记应该只指示钟被绘制的颜色类，即最高优先级类
代码中输出内容的示例：<span class="Icon name_notification indication has-success has-warning has-error"></span>
下面是一个应该如何的例子：<span class="Icon name_notification indication has-error"></span>
我尝试了以下选项，但没有类显示在标记中，并且钟形没有着色
x一个一个一个一个x一个一个二个x
1条答案
按热度按时间jchrr9hc1#
我不确定你是如何返回一个对象并解析它以在模板中使用的，但我希望即使我用来返回的格式不是你所需要的，你也能看到其中的逻辑。
您可以运行条件返回链。如果有错误，则返回错误类型。如果没有错误，并且有警告，则返回警告类型。如果没有错误，并且成功，则返回成功类型。如果没有错误，则返回默认值。
如果没有“默认”状态，您可以去掉成功条件并将其设为默认状态，显然，您可以使用
indication: !!notifications.length做得更好，不必每次都计算它，但我不确定这意味着什么，所以我没有尝试对它做太多操作。希望能有所帮助，如果你需要任何澄清，请告诉我。