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>

我想要发生的是“大＆＃39;要添加到渲染的类中，如下所示：

<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属性，您可以像绑定课程一样使用它：

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渲染函数将道具传递给类

1 个答案: