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

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>

我想要的是将单词 'large' 添加到呈现的类中，如下所示：

<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

这应该可以做到。

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.

不过，documentation 显示 class 属性您可以像绑定到 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.

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

How to Pass Props to Class Using VueJS Render Function

vue.js

vue-component

vuejs2