如何在渲染函数中使用 createElement 创建 Vuetity 徽章和图标

Question

在我的 Vue 应用程序中，我使用 v-data-table，列值是使用功能组件内的渲染函数渲染的，如下所示：

render(createElement) {
    if (this.$props.format) {
      return this.$props.format(this.item, this.index, createElement);
    }
    return createElement('div', this.getText());
  },

然后在我的 format 函数（它是单独文件中对象的一部分）中，您可以使用 createElement 创建一个 hTML 元素和 return 它。这是应用程序另一部分的示例：

format: (template, index, createElement) => {
    const captureType = template.captureType === 'passphrase' ? 'voice' : template.captureType;
    return createElement('div', captureType);
  },

尽管如此，我正在尝试做一些相当复杂的事情，这是一个带有徽章的 Vuetify 图标。这是来自 Vuetify docs.

的代码

<v-badge left>
  <template v-slot:badge>
    <span>6</span>
  </template>
  <v-icon
    large
    color="grey lighten-1"
  >
    shopping_cart
  </v-icon>
</v-badge>

作为起点，我可以创建基本徽章 HTML 就好了

    format: (item, index, createElement) => {
      const propsObj = {
        attrs: {
          color: 'blue',
        },
        props: {
          overlap: true,
          left: true,
        },
        slots: {
          badge: 'dummy',
        },
      };
      return createElement('v-badge', propsObj, [createElement('v-icon', { attrs: { color: 'success', large: true } }, 'account_circle')]);
    },

这几乎让我明白了，因为它显示了我的图标，并且用 badge 元素包裹起来，尽管没有显示徽章内容：

<span class="v-badge v-badge--left v-badge--overlap">
  <i aria ....>account_circle></a>
</span>

我的问题是将显示值获取到 badge 插槽。我错过了什么？

Answer 1

在朋友的帮助下，我成功了。这是最终代码：

format: (item, index, createElement) => {
      const propsObj = {
        props: {
          overlap: true,
          left: true,
          color: 'success',
        },
      };
      const icon = createElement('v-icon', { props: { color: 'success', large: true } }, 'account_circle');
      const span = createElement('span', { slot: 'badge' }, '5');
      return createElement('v-badge', propsObj, [span, icon]);
    },

我的想法是将其分解成更小的块，以模仿我要创建的结构。在这种情况下，它基本上是一个包含两个子元素的 v-badge：badge 槽和 v-icon 元素。我将适当的配置选项传递给每个子元素，然后将两个呈现的元素传递给父元素 v-badge.

的 createElement

如何在渲染函数中使用 createElement 创建 Vuetity 徽章和图标

How to create Vuetity badge and icon using createElement in render function

javascript

icons

vue.js

vuetify.js

vue-render-function