如何使用 vue 3 呈现自定义 vis.js 项目模板答案

【问题标题】：how to render custom vis.js item templates using vue 3如何使用 vue 3 呈现自定义 vis.js 项目模板
【发布时间】：2022-01-02 13:18:02
【问题描述】：

问题：Visjs 文档展示了如何在 visjs 中将反应模板用于海关物品而不是 vue 的示例。

解决方案：我们需要使用 vue 渲染函数来渲染模板，同时将 props 传递给子节点并将事件发送回父节点。

我解决了groupTemplate 不想加载的问题。（答案已更新）

【问题讨论】：

标签： javascript vue.js render vuejs3 vis.js

【解决方案1】：

所以使渲染函数异步似乎可以解决它：D 我会把这个留给未来的人。整天都在努力让组模板正常工作。我原以为defineAsyncComponent 会解决它，但它并没有完全让步，似乎只是异步加载渲染函数就可以了。


import { render, h } from 'vue';

const itemTemplate = async (item, element) => render(h(bar, {
  onDelete: (ev) => {
    items.remove(item.id)
  },
  item,
}), element
)


const groupTemplate = async (group, element) => render(h(groupbar, {
  onHide: () => {
    groups.update(group.id, { hidden: true })
  },
  group,

}), element
)

const options = ref({
  template: (item, element) => {
    if (!item) return;
    return itemTemplate(item, element);
  },
  groupTemplate: (group, element) => {
    if (!group) return;
    return groupTemplate(group, element);
  }

})

模板


<template>
  <div class="group-container">
    <button @click="emits('hide', group.id)">hide</button>
    {{ group.content }}
  </div>
</template>

<script setup>
import { watch } from 'vue';


const emits = defineEmits(['hide']);

const props = defineProps({
  group: {
    type: Object
  }
})

</script>


<style>
.group-container {
  background: red;
}
</style>

【讨论】：