web端ant-design-vue Modal.info组件自定义icon和title使用小节

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:当学期未归还书籍按照当前学期结束时间计算该书借阅时长。')
// ])
// ]),
});
};
web端ant-design-vue Modal.info组件自定义icon和title使用小节的更多相关文章
- 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换
使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...
- Ant Design Vue select下拉列表设置默认值
在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="query ...
- Ant Design Vue Pro 项目实战-项目初始化(一)
写在前面 时间真快,转眼又是新的一年.随着前后端技术的不断更新迭代,尤其是前端,在目前前后端分离开发模式这样的一个大环境下,交互性.兼容性等传统的开发模式已经显得有些吃力.之前一直用的是react,随 ...
- 基于Ant Design Vue封装一个表单控件
开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...
- Vue3学习(二)之集成Ant Design Vue
一.集成Ant Design Vue npm install ant-design-vue@2.0.0-rc.3 --save 兼容性 Ant Design Vue 2.x 支持所有的现代浏览器. 如 ...
- 使用npm安装 Ant Design Vue 时报错—ant-design-vue@latest(sha1-qsf / gCIFcRYxyGmOKgx7TmHf1z4 =)seems to be corrupted.
安装 Ant Design Vue 时报错: npm install ant-design-vue --save ant-design-vue @ latest(sha1-qsf / gCIFcRYx ...
- c#版阿里云oss上传——基于layui、pupload的oss 后端web端直传的vue组件
废话前言 去年,做项目用到oss上传,度娘上逛了一圈写了个前后端代码结合的c#版oss上传. 今年又要用到oss上传时发现很难复用,复用改动的范围太大,显然这个轮子不合格.于是想了下,花了一天的时间( ...
- Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
前言 写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值 简化了渲染的子组 ...
- Ant Design Vue项目解析-前言
源码系列文章很长时间没有更新,一是在考虑文章用什么方式写质量会更高,用什么方式总结更易于扩展和总结知识点,加上工作.看书.健身占用的时间比较多所以也没时间去整理.最近在网上看到一篇文章感觉这种方式不错 ...
- 文档驱动 —— 表单组件(五):基于Ant Design Vue 的表单控件的demo,再也不需要写代码了。
源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...
随机推荐
- RHCA cl210 013 制作镜像 轮转key rabbitmq追踪 写时复制 keystone多域登录图形界面
undercloud 部署 overcloud overcloud控制节点上的组建rabbitmq 排错需要rabbitmq,开启追踪则会更详细,会消耗性能 环境问题 登录一下classroom os ...
- python 返回实例对象个数
python 返回实例对象个数 Python 没有提供任何内部机制来跟踪一个类有多少个实例被创建了,或者记录这些实例是些什么东西.如果需要这些功能,你可以显式加入一些代码到类定义或者__init__( ...
- web3 产品介绍: safe --多签钱包 多人审批更放心
Safe是一款由Gnosis团队开发的多签钱包,它提供了一种安全.灵活和易于使用的方式来管理加密资产.在本文中,我们将介绍Safe的主要特点以及如何使用Safe来保护您的数字资产. 一.Safe的特点 ...
- java Hutool工具类之Excel的操作
1.背景 程序中上传下载excel是家常便饭,因此hutool给我们提供了非充强大的工具类,使用如下...... 2.使用 官方地址:https://hutool.cn/docs/#/poi/Exce ...
- 2024年Apache DolphinScheduler RoadMap:引领开源调度系统的未来
非常欢迎大家来到Apache DolphinScheduler社区!随着开源技术在全球范围内的快速发展,社区的贡献者 "同仁" 一直致力于构建一个强大而活跃的开源调度系统社区,为用 ...
- Typora 上传到 Github 实现笔记同步管理
首先在 Github 上 new 一个 repository ,我建的名称是 md_notes 然后在本地 terminal 中启动以下命令新建一个 ssh key ssh-keygen -o 生成 ...
- OpenVino快速落地部署教程
OpenVino快速落地部署教程 Openvino是由Intel开发的专门用于优化和部署人工智能推理的半开源的工具包,主要用于对深度推理做优化.本教程适用于Yolov5-7.0,直接跑Yolov5为6 ...
- Devexpress PdfViewer汉化及隐藏右键菜单
先看效果图 1.效果图 隐藏了打印与文档属性功能 2.原图 1.关键事件 PopupMenuShowing public From() { InitializeComponent(); //弹出菜单加 ...
- 【已解决】如果将MySQL数据库中的表生成PDM
数据库表PDM关系图 | 原创作者/编辑:凯哥Java | 分类:经验分享 有时候,我们需要MySQL数据库中的表生成对应的PDM文件,这里凯哥就讲讲第一种将MySQL数据库的表生成对应的PDM文 ...
- RabbitMQ核心概念以及工作原理【转】
RabbitMQ核心概念以及工作原理 我们来看看流行的RabbitMQ消息系统以及它是如何让你的系统之间进行解耦的. 英文原文 RabbitMQ 在这篇短文里,我们会介绍什么是RabbitMQ,它 ...