vue3 + jsx 中使用native ui 组件插槽

前言

在 native ui 中, 个别组件必须拥有插槽才能正常使用, 比如 提示组件(NTooltip), 接下来给出在 vue3 且为 jsx 中使用的实例

native ui文档

<template><n-popover trigger="hover"><template #trigger><n-button>悬浮</n-button></template><span>或许不想知道你的花园长得咋样</span></n-popover>
</template>

引入需使用组件

import { NTooltip } from "naive-ui";

HTML写法

<NTooltip trigger="hover">{{trigger: () => <div class="number-color-1">初始化的文字</div>,default: () => <div class="number-color-1">需要提示的文字</div>}}
</NTooltip>

成果展示