mixin 中的条件包装器

Question

mixin step(arr)
  each item in arr
    .step__item.col-md.col-sm-6
       .step__icon
          i(class=item.icon)
       .step__text=item.text

arr 是一个对象数组。如果在对象中定义了特定的属性，我想为 .step__item 添加条件包装器。我如何在不将 else 语句中的整个代码加倍的情况下做到这一点：

mixin step(arr)
  each item in arr
    if item.prop !== undefined
      .wrapper
        .step__item.col-md.col-sm-6
          .step__icon
            i(class=item.icon)
          .step__text=item.text
    else
      .step__item.col-md.col-sm-6
        .step__icon
          i(class=item.icon)
        .step__text=item.text

Answer 1

这对另一个 Pug mixin 来说非常好 use-case，可以从您的原始 mixin 中调用它：

mixin wrapper(condition)
  if condition
    .wrapper
      block
  else
    block

mixin step(arr)
  each item in arr
    +wrapper(item.prop !== undefined)
      .step__item.col-md.col-sm-6
        .step__icon
          i(class=item.icon)
        .step__text=item.text

wrapper mixin 的内容将被传递到它的块语句，并且 .wrapper 元素将仅在您传递的任何条件作为 mixin 的参数计算为 true.

Answer 2

any possibility of making inline condition for parent? Something like !item.prop ? '' : wrapper?

你可以，但这也会在你的其他条件上添加一个包装 div。

mixin step(arr)
  each item in arr
    div(class=(item.prop !== undefined ? 'wrapper': ''))
      .step__item.col-md.col-sm-6
        .step__icon
          i(class=item.icon)
        .step__text=item.text

mixin 中的条件包装器

Сonditional wrapper inside mixin

pug