如何在渲染函数中使用 createElement 创建 Vuetity 徽章和图标
Posted
技术标签:
【中文标题】如何在渲染函数中使用 createElement 创建 Vuetity 徽章和图标【英文标题】:How to create Vuetity badge and icon using createElement in render function 【发布时间】:2020-07-23 18:12:24 【问题描述】:在我的 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 元素并返回它。这是应用程序另一部分的示例:
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
插槽。我错过了什么?
【问题讨论】:
【参考方案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
元素。我将适当的配置选项传递给每个子元素,然后将两个呈现的元素传递给 createElement
的父 v-badge
。
【讨论】:
以上是关于如何在渲染函数中使用 createElement 创建 Vuetity 徽章和图标的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 createElement 在渲染方法上定义 Vue 事件
在渲染期间,为啥要在 React.createElement 中包装一个函数式组件,而不是通过函数调用来使用它返回的元素呢?