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使用小节的更多相关文章

  1. 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换

    使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...

  2. Ant Design Vue select下拉列表设置默认值

    在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="query ...

  3. Ant Design Vue Pro 项目实战-项目初始化(一)

    写在前面 时间真快,转眼又是新的一年.随着前后端技术的不断更新迭代,尤其是前端,在目前前后端分离开发模式这样的一个大环境下,交互性.兼容性等传统的开发模式已经显得有些吃力.之前一直用的是react,随 ...

  4. 基于Ant Design Vue封装一个表单控件

    开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...

  5. Vue3学习(二)之集成Ant Design Vue

    一.集成Ant Design Vue npm install ant-design-vue@2.0.0-rc.3 --save 兼容性 Ant Design Vue 2.x 支持所有的现代浏览器. 如 ...

  6. 使用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 ...

  7. c#版阿里云oss上传——基于layui、pupload的oss 后端web端直传的vue组件

    废话前言 去年,做项目用到oss上传,度娘上逛了一圈写了个前后端代码结合的c#版oss上传. 今年又要用到oss上传时发现很难复用,复用改动的范围太大,显然这个轮子不合格.于是想了下,花了一天的时间( ...

  8. Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件

    前言 写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值 简化了渲染的子组 ...

  9. Ant Design Vue项目解析-前言

    源码系列文章很长时间没有更新,一是在考虑文章用什么方式写质量会更高,用什么方式总结更易于扩展和总结知识点,加上工作.看书.健身占用的时间比较多所以也没时间去整理.最近在网上看到一篇文章感觉这种方式不错 ...

  10. 文档驱动 —— 表单组件(五):基于Ant Design Vue 的表单控件的demo,再也不需要写代码了。

    源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...

随机推荐

  1. RHCA cl210 013 制作镜像 轮转key rabbitmq追踪 写时复制 keystone多域登录图形界面

    undercloud 部署 overcloud overcloud控制节点上的组建rabbitmq 排错需要rabbitmq,开启追踪则会更详细,会消耗性能 环境问题 登录一下classroom os ...

  2. python 返回实例对象个数

    python 返回实例对象个数 Python 没有提供任何内部机制来跟踪一个类有多少个实例被创建了,或者记录这些实例是些什么东西.如果需要这些功能,你可以显式加入一些代码到类定义或者__init__( ...

  3. web3 产品介绍: safe --多签钱包 多人审批更放心

    Safe是一款由Gnosis团队开发的多签钱包,它提供了一种安全.灵活和易于使用的方式来管理加密资产.在本文中,我们将介绍Safe的主要特点以及如何使用Safe来保护您的数字资产. 一.Safe的特点 ...

  4. java Hutool工具类之Excel的操作

    1.背景 程序中上传下载excel是家常便饭,因此hutool给我们提供了非充强大的工具类,使用如下...... 2.使用 官方地址:https://hutool.cn/docs/#/poi/Exce ...

  5. 2024年Apache DolphinScheduler RoadMap:引领开源调度系统的未来

    非常欢迎大家来到Apache DolphinScheduler社区!随着开源技术在全球范围内的快速发展,社区的贡献者 "同仁" 一直致力于构建一个强大而活跃的开源调度系统社区,为用 ...

  6. Typora 上传到 Github 实现笔记同步管理

    首先在 Github 上 new 一个 repository ,我建的名称是 md_notes 然后在本地 terminal 中启动以下命令新建一个 ssh key  ssh-keygen -o 生成 ...

  7. OpenVino快速落地部署教程

    OpenVino快速落地部署教程 Openvino是由Intel开发的专门用于优化和部署人工智能推理的半开源的工具包,主要用于对深度推理做优化.本教程适用于Yolov5-7.0,直接跑Yolov5为6 ...

  8. Devexpress PdfViewer汉化及隐藏右键菜单

    先看效果图 1.效果图 隐藏了打印与文档属性功能 2.原图 1.关键事件 PopupMenuShowing public From() { InitializeComponent(); //弹出菜单加 ...

  9. 【已解决】如果将MySQL数据库中的表生成PDM

    数据库表PDM关系图 |  原创作者/编辑:凯哥Java |  分类:经验分享 有时候,我们需要MySQL数据库中的表生成对应的PDM文件,这里凯哥就讲讲第一种将MySQL数据库的表生成对应的PDM文 ...

  10. RabbitMQ核心概念以及工作原理【转】

    RabbitMQ核心概念以及工作原理 我们来看看流行的RabbitMQ消息系统以及它是如何让你的系统之间进行解耦的. 英文原文   RabbitMQ 在这篇短文里,我们会介绍什么是RabbitMQ,它 ...