一. 环境

“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...'),
]))(),

重新执行后效果如下:
在这里插入图片描述
(完)

Logo

前往低代码交流专区

更多推荐