ant-design-vue Modal.confirm 提示内容自定义, 多行显示

<script setup>
import {
  createVNode
} from 'vue';
import { Modal } from 'ant-design-vue';


function handleTest() {
  const childrenDiv = [];
  for (let i = 0; i < 6; i += 1) {
    const item = createVNode('div', { class: 'item', }, `这是内层div的内容${i + 1}`);
    childrenDiv.push(item);
  }
  const outerDivVNode = createVNode('div', { style: 'padding: 10px;' }, childrenDiv);
  Modal.confirm({
    title: '信息提示',
    content: outerDivVNode, // 自定义的内容,多行显示
    okText: '确认',
    cancelText: '取消',
    centered: true,
    cancelButtonProps: { style: { display: 'none' } }, // 隐藏取消按钮
    onOk: async () => {
    }
  });
}

</script>

效果如下:
在这里插入图片描述

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐