Naive UI 动态渲染menu

Naive UI 有许多组件设计很合理，用户体验挺好。但也有些组件对开发者并不友好。例如，icon组件，居然还需要自己引入第三方icon组件作为其组件的参数，不像Quasar组件，一个name字段就能够完成icon的配置。

这个设计的缺陷给开发者带来了麻烦。例如，如果一个menu的数据是后端返回来的，那么在json字段里怎么表示icon组件呢？

后端只能用icon组件的字符串作为标志符，返回给前端。前端需要自己做动态渲染。

这里记录一下动态渲染的流程。

首先，看文档。menu对icon字段的要求是 一个返回Vnode的函数, 这个Vnode显然就是 NIcon虚拟节点。

menu组件对icon的要求是一个返回Vnode的函数

NIcon 的虚拟Dom结构如下：

  <n-icon>
    <game-controller-outline />
  </n-icon>

Vue中的h() 的返回结果就是Vnode, 要返回 NIcon 的虚拟Dom，就是要返回下面函数的执行结果。

 h(NIcon, null, { default: () => h(iconComponent) })

也就是说，NMenu的icon字段，可以这样设置

icon: () => h(NIcon, null, { default: () => h(iconComponent) })

这是完全符合规定的，但问题是，iconComponent怎么获得，后端来的是String，而不是Component 啊。

这里需要借助动态引入的语法。

const { [iconString]: iconComponent} = await import("@vicons/ionicons5");

这样，字符串就被转成了组件，那么借助闭包，我们改造icon的生成函数：

export async function asyncRenderIcon(icon) {
  const { [icon]: iconComp } = await import("@vicons/ionicons5");
  return () => h(NIcon, null, { default: () => h(iconComp) });
}

这样，menu的icon字段需要由一个async函数提供，要把等待异步函数的执行结果（即一个返回VNode的函数）作为value赋予icon。总体代码如下：

const getOption = async (menu) => ({
  label: () =>
    h(
      RouterLink,
      {
        to: menu.url,
      },
      { default: () => menu.title }
    ),
  key: menu.url,
  icon: await asyncRenderIcon(menu.icon),
});

export function useMenu() {
  const menuOptions = ref([]);

  onMounted(async () => {
    const data = await api.get(URLs.NAVIGATION);

    menuOptions.value = await Promise.all(
      data.map(async (m) => {
        if (m.children && m.children.length > 0) {
          const children = await Promise.all(
            m.children.map(async (child) => await getOption(child))
          );

          const menu = await getOption(m);
          menu.children = children;
          return menu;
        } else {
          return await getOption(m);
        }
      })
    );
  });

  return menuOptions;
}

总结

可以看出，Naive UI对开发者的能力要求是要高于Quasar的。这一个小小的适配，就需要了解虚拟Dom/动态导入/闭包/异步函数等知识，而在Quasar中，这些仅仅是一个简单的name=''xxx"即可。