vue.js - 如何使用 VueJS 渲染函数将 Prop 传递给类

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 属性，您可以像绑定(bind)到 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 .