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>

成果展示