Лучший способ условно применять служебные классы к компоненту на основе его свойств - PullRequest
0 голосов
/ 27 августа 2018

Я использую 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) и так далее ...

С этим в качестве основы у меня есть компонент кнопки, который имеет следующие реквизиты:

  1. Тема - со значениями первичная, вторичная.
  2. Инвертировано - true / false
  3. Отключено - true / значение

Создание объекта класса для этого количества взаимосвязанных объектов становится немного беспорядочным:

{
'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 + ')' не будет работать, так как это не последний класс, который мы хотим.

Мне нужна помощь в том, как эти условия можно реорганизовать, чтобы сделать управление стилем с помощью атомарных / служебных классов.

1 Ответ

0 голосов
/ 27 августа 2018

Вы можете переместить всю логику в computed свойство:

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

и передать его в шаблон: <div class='getBtnClass'>...</div>

...