Question

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

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

以此为基础，我有一个具有以下道具的按钮组件：

主题-具有主要，次要的值。
倒置-是/否
已禁用-true / value

为大量相互关联的道具创建类对象变得有些混乱：

{
'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)

}

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

另一件事很重要：我使用的原子CSS库要求最终类存在于代码中，因为它将解析并将它们放入CSS中。因此'Bgc(' + someVariable + ')'不能正常工作，因为它不是我们想要的最后一堂课。

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

Answer 1

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

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

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

根据组件的有条件在组件上有条件地应用实用工具类的最佳方法

1 个答案: