如何使用 VueJS 渲染函数将道具传递给类

Question

以下代码有效：

export default {
    props: ['tag', 'type', 'size', 'color', 'direction'],
    render(createElement) {
        return createElement(
            this.tag || 'div',
            {
                attrs: { class: 'ui label'}
            },
            this.$slots.default
        );
    }
}

我可以创建以下 html 标签，它可以正确呈现：

<label-x tag="a">Label X Text</label-x>

它呈现如下：

<a class="ui label">Label X Text</a>

现在让我们向该 html 标签添加一个属性，如下所示：

<label-x tag="a" size="large">Label X Text</label-x>

我想要发生的是将“大”这个词添加到呈现的类中，如下所示：

<a class="ui label large">Label X Text</a>

但是，我不知道如何做到这一点。我尝试了以下操作，但出现错误：

export default {
    props: ['tag', 'type', 'size', 'color', 'direction'],
    render(createElement) {
        return createElement(
            this.tag || 'div',
            {
                class: { this.size },
                attrs: { class: 'ui label'}
            },
            this.$slots.default
        );
    }
}

我做错了什么——更重要的是，我该如何做对？

谢谢。

Answer 1

This should do it.

export default {
  props: ['tag', 'type', 'size', 'color', 'direction'],
  render(createElement) {
    // set the default classes
    let classes = ["ui", "label"]
    //check to see if we have a size arrtibute
    if (this.size)
      classes.push(this.size)

    return createElement(
      this.tag || 'div',
      {
        attrs: { class: classes.join(" ")}
      },
      this.$slots.default
    );
}

Example.

Though, the documentation shows a class property you can use just like you would if you bound to class:

export default {
  props: ['tag', 'type', 'size', 'color', 'direction'],
  render(createElement) {
    let classes = ["ui", "label"]
    if (this.size)
      classes.push(this.size)

    return createElement(
      this.tag || 'div',
      {
        class: classes
      },
      this.$slots.default
    );
  }

Example.