antdv Modal使用jsx自定义渲染内容

如图要实现这样的效果，官方推荐的是render函数

对应代码：

import {  h } from 'vue'
Modal.confirm({
      title: '全局光伏组件统计',
      content: h('div', [
        '全局光伏组件数量为: ',
        h('span', { style: { color: '#1890ff', fontWeight: 'bold' } }, res),
        '，当前厂址数量为：',
        h('span', { style: { color: '#ff7a00', fontWeight: 'bold' } }, siteCount),
        '，是否要更新厂址光伏组件数量？',
      ]),
      okText: '确定',
      cancelText: '取消',
      onOk() {
        siteStore.updateSolarCount(res)
      },
    })

其实还有更好的解决方案：jsx

<script setup lang="tsx">
// ... 其他导入保持不变，移除 h 函数导入
    Modal.confirm({
      title: '全局光伏组件统计',
      content: (
      <div>
        全局光伏组件数量为:{' '}
        <span style={{ color: '#1890ff', fontWeight: 'bold' }}>{res}</span>
        ，当前厂址数量为：{' '}
        <span style={{ color: '#ff7a00', fontWeight: 'bold' }}>{siteCount}</span>
        ，是否要更新厂址光伏组件数量？
      </div>
    ),
      okText: '确定',
      cancelText: '取消',
      onOk() {
        siteStore.updateSolarCount(res)
      },
    })
    ...

这样写起来就顺手多了