环境

"ant-design-vue": "^1.6.3",
"vue": "^2.6.11",

需求

让 antd 的 Message 组件能够手动触发关闭

From

to

思路

查看 antdv 文档发现 Message 组件支持使用 VNode 作为显示内容，因此只需要使用 Vue 的 createElement 方法创建带有关闭样式的 VNode 即可。

另外，在全局调用 Message 组件时会返回一个关闭当前 Message 的方法，在需要关闭 Message 时可调用此方法

let _remove = app.$message.error('This is an error message')
// 需要关闭 Message 时调用 _remove()
console.log(_remove)/**
ƒ result() {if (messageInstance) {messageInstance.removeNotice(target);}}
*/

实现

// 方法
const myMessageError = (content, duration, onClose) => {let _remove// 创建 VNodeconst h = app.$createElementlet innerText = h('span', { style: { color: '#000000A6' } }, content);let innerIcon = h('a-icon', {style: { marginRight: '0px', marginLeft: '20px', color: '#ccc', cursor: 'pointer' },attrs: { type: 'close' },on: { click: () => _remove() }})let container = h('span', {}, [innerText, innerIcon])// 调用 Message 组件_remove = app.$message.error({content: container,duration: duration || 0,onClose: onClose,})
}// 调用
myMessageError('This is an error message')

补充

上文仅为 Message 组件的简单运用，并未处理 duration、onClose 参数
Message 组件还支持其他配置，文中并未体现，有兴趣请查阅文档
antd 提供了 Notification 组件，该组件自带关闭功能，视使用场景可选用不同组件

参考

Vue官方文档 - createElement

antdv官方文档 - Message

Ant Design of Vue - 让 Message 组件支持手动点击关闭相关推荐

标题Ant Design of Vue 组件库中Modal“确认“按钮和“取消“按钮成英文状态
标题Ant Design of Vue 组件库中Modal"确认"按钮和"取消"按钮成英文状态因为是国际化的原因,造成确定按钮和取消按钮变成英文,需要设置 o ...
基于Ant Design of Vue实现时长组件 duration
最近遇到一个需求,需要一个输入时长的组件,在经过一番寻找后没有合适的,最终自己动手写一个(实现了v-model双向绑定),记录一下,也给小伙伴们提供一个方便. 本示例基于ant design of v ...
Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
全部章节 >>>> 文章目录一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...
Ant Design of Vue +TS 表单动态增加数据验证卧坑姿势
文章目录 Update 20210601 Update 20210525 原文: 1.a-form的model 2.获取数据源码 Update 20210601 今天做别的页面的时候发现又取不到数据 ...
ant design of vue分页/layui实现分页
ant design of vue分页官方文档:https://www.antdv.com/components/pagination-cn/ 结果: 代码: <a-paginationv-i ...
使用Ant Design 和Vue，React中后台开发套餐
2019独角兽企业重金招聘Python工程师标准>>> 前言目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公 ...
创建Vue+TS+Ant Design of Vue 项目
创建Vue+TS+Ant Design of Vue 项目创建项目选择配置运行项目安装 ant-design-vue 安装 babel-plugin-import 使用VS Code打开配置 ...
ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标在src/ ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...

Ant Design of Vue - 让 Message 组件支持手动点击关闭

环境

需求

思路

实现

补充

参考

Ant Design of Vue - 让 Message 组件支持手动点击关闭相关推荐

最新文章

热门文章