惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
D
Docker
Microsoft Security Blog
Microsoft Security Blog
Google DeepMind News
Google DeepMind News
M
MIT News - Artificial intelligence
P
Proofpoint News Feed
Engineering at Meta
Engineering at Meta
Y
Y Combinator Blog
Vercel News
Vercel News
F
Fortinet All Blogs
B
Blog
Recent Announcements
Recent Announcements
A
About on SuperTechFans
GbyAI
GbyAI
T
The Blog of Author Tim Ferriss
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - Franky
MongoDB | Blog
MongoDB | Blog
Stack Overflow Blog
Stack Overflow Blog
B
Blog RSS Feed
C
Check Point Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
V
Visual Studio Blog
月光博客
月光博客

博客园 - 奔跑的小蚂蚁9538

Vue 3 组件通信,别只会用 Props 和 Emits 了,你想知道的都在这里 Vue 3图片全屏预览组件:打造专业级图像浏览体验 使用vue3+ts构建企业级文件传输管理系统:状态管理、性能优化与用户体验的深度实践 使用fetchEventSource构建高效AI智能助手:文件搜索场景的完整实现与深度解析 从表格到脑图:Vue3 + TypeScript +antv-x6 打造可视化督办任务系统(支持多级拆解+批量操作+动态视图切换) 构建企业级督办任务系统:Vue3 + TypeScript 实战(多级任务拆解+批量操作+进度追踪+单元格合并) 打造沉浸式智能AI问答助手:Vue3 + UniApp 全端实战(支持 Markdown/公式/多模态交互) 构建企业级智能知识库:Vue3 + TypeScript 实战(分类管理+全文检索+批量操作) Vue3 + TypeScript 实战:打造企业级工单管理系统(列表+详情+时间轴交互) Vue3 + G2 实战:打造高校学生打卡数据可视化大屏 Vue3 + TypeScript 实战:打造自适应 AI 问答与在线测验考试系统 Vue3 + TypeScript 实战:打造企业级动态合同表单系统 Vue3 + Iframe 实战:打造企业级流程配置中心 基于 Vue3 + TS + Ant Design Vue 实现精细化菜单按钮权限授权组件 用 Vue3 + fetch-event-source 打造流式 AI 翻译平台:OCR + 大模型 + SSE 全链路实战 web端ant-design-vue-Anchor锚点组件使用小节(2) web端ant-design-vue-Anchor锚点组件使用小节(1) web端ant-design-vue Upload 手动实现文件上传使用小节 前端工程化解决方案webpack使用小结 uniapp电子签名盖章实现详解 vue前端使用nexus配置npm私有仓库
web端ant-design-vue Modal.info组件自定义icon和title使用小节
奔跑的小蚂蚁9538 · 2024-10-10 · via 博客园 - 奔跑的小蚂蚁9538

   web端ant-design-vue Modal.info组件自定义icon和title整理小节,最近在项目中用到了自定义icon和title的功能,经过测试发现,如果自定义icon title会自动换行,尝试直接修改样式和穿透方式都没有效果,最后采取了一个巧妙的方式,将icon和title放在一个自定义组件内,完美解决!代码如下

const showModalInfo = () => {
Modal.info({
// icon: () => h('span', { style: { fontSize: '18px', color: '#1890ff'}, class: 'iconfont icon-info-circle-fill animation animation-info-circle' }),
icon: () => h('div', { style: { }, class: ''},[
h('i', { style: { fontSize: '18px', color: '#1890ff'}, class: 'iconfont icon-info-circle-fill' }),
h('span', { class: 'ant-modal-confirm-header' },'说明')
]),
okText: '关闭',
width: 480,
content: ()=>h('div', {}, [
// 说明内容
data.readBookStandardDescription? h('div', {}, [
h('div', {style: {whiteSpace: 'pre-wrap'}}, data.readBookStandardDescription)
]) : h('div', {style: {whiteSpace: 'pre-wrap'}}, [
h('p', '在校生第一学期至第五学期最多可认定4次。每人每学期达标获得5积分,不达标0积分。\\n达标要求:每学期借书数量≥30本 且 每本借阅时间≥5天。\\n注1:同一学期借同一本书不计入有效借书。\\n注2:当学期未归还书籍按照当前学期结束时间计算该书借阅时长。')
])
]),

// content: h('div', {}, [
// // 说明内容
// data.readBookStandardDescription? h('div', {}, [
// h('p', {}, data.readBookStandardDescription)
// ]) : h('div', {}, [
// h('p', '在校生第一学期至第五学期最多可认定4次。每人每学期达标获得5积分,不达标0积分。'),
// h('p', '达标要求:每学期借书数量≥30本 且 每本借阅时间≥5天。'),
// h('p', '注1:同一学期借同一本书不计入有效借书。'),
// h('p', '注2:当学期未归还书籍按照当前学期结束时间计算该书借阅时长。')
// ])
// ]),
});
};