根据 props 有条件地在组件上应用实用程序类的最佳方法

Posted 2023-02-23

【中文标题】根据 props 有条件地在组件上应用实用程序类的最佳方法

【英文标题】：Best way to conditionally apply utility classes on a component based on its props

【发布时间】：2019-02-02 00:55:23

【问题描述】：

我正在使用 Vue.js（尽管我的问题对任何框架都有效），您可以在其中传递一个简单的对象，并将 truthy 键作为类应用。 例如。 <div :class=" 'class1': prop1, 'class2', prop2 ">Hello</div>。如果prop1 为真，则class1 适用。如果两个 props 都为真，则 class1 和 class2 都适用。

另外，我正在使用 Atomic/Utiliy 类。因此，其中没有具有多个属性的类，相反，对于color:red，我使用C(red)，对于background-color:blue，我使用Bgc(blue) 等等...

以此为基础，我有一个按钮组件，它具有以下属性：

主题 - 具有主要、次要的价值。 倒置 - 真/假 已禁用 - 真/值

为这么多相互关联的道具创建一个类对象变得有点混乱：

'Bdc(color1) Bdc(color2):h Bdc(color3):a': this.theme === 'primary' && !this.linkOnly,
'Bdc(color4) Bdc(color5):h Bdc(color5):a': this.theme === 'positive' && !this.linkOnly,
'Bdc(color1) Bdc(color2):h Bdc(color4):a': this.theme === 'negative' && !this.linkOnly,
'Bdc(color3) Bdc(color3):h Bdc(color3):a': (this.theme === 'default' && !this.linkOnly) ||
(!this.theme && !this.linkOnly),

'C(color1) C(color2):h C(color3):a':
    this.theme === 'primary' && (this.linkOnly || this.inverted),
'C(color3) C(color4):h C(color5):a':
    this.theme === 'positive' && (this.linkOnly || this.inverted),
'C(color2) C(color3):h C(color4):a':
    this.theme === 'negative' && (this.linkOnly || this.inverted),
'C(color5) C(color6):h C(color7):a':
    (this.theme === 'default' && (this.linkOnly || this.inverted)) ||
    (!this.theme && (this.linkOnly || this.inverted)),
'C(color1)': !(this.linkOnly || this.inverted)

如您所见，那里的条件很难阅读。并且添加一些新的 prop 会使其更难以正确实现。

还有一件更重要的事情：我使用的原子 CSS 库要求最终类存在于代码中，因为它会解析并将它们放入 CSS 中。所以'Bgc(' + someVariable + ')' 不会起作用，因为它不是我们想要的最终课程。

我正在寻求有关如何重构这些条件以使用原子/实用程序类管理样式的帮助。

【参考方案1】：

您可以将所有逻辑移至computed 属性：

function getBtnClass () 
  let classes = []
  if (this.theme === 'primary') classes.push('Bdc(color1)', 'Bdc(color2):h')
  ...
  return classes.join(' ')

并将其传递给模板：<div class='getBtnClass'>...</div>

【讨论】：

我实际上只从计算属性返回了我提到的大对象。但随之而来的问题是对象巨大，条件复杂。在您的示例中，我的代码的长条件只是在 if 条件内移动。还是我在您的代码中遗漏了什么？

我已经更新了答案，所以我的想法是将 classList 转换为数组并逐个推送类。它可以使条件不那么复杂吗？你也可以试试switch..case 语法，它会让你的代码更具可读性。