一. 环境

“vue”: “^3.0.2”,
“ant-design-vue”: “^2.1.3”,

二. 需求

现在需要做个确认弹框，弹框的内容根据后台返回的内容来显示，由于有多个字段，且需要分排展示，所以内容不能用平时的字符串了，需要用标签来包装显示。

三. 代码部分

按照官方实例如下：

<script>
import { message, Modal } from 'ant-design-vue';
import { ref, h, defineComponent } from 'vue';

export default defineComponent({
 Modal.confirm({
   title: '清除DOVE配置',
   content: () =>
     h('div', {}, [
     h('p', 'some messages...some messages...'),
     h('p', 'some messages...some messages...'),
   ]),
   okText: '确认',
   okType: 'danger',
   cancelText: '取消',
   onOk() {},
 });
})
 </script>

然而得到的结果如下：组件将一个函数展示了出来。。。

解决如下： 这个函数需要我们手动执行，上面代码content部分进行如下修改。

content: (() =>
  h('div', {}, [
  h('p', 'some messages...some messages...'),
  h('p', 'some messages...some messages...'),
]))(),

重新执行后效果如下：

（完）