ant-design-vue优化messge方法自定义提示及关闭 ant-design-vue优化messge方法自定义

最近项目需求接口返回错误提示，可自动换行且手动关闭

文章图片
image.png
【ant-design-vue优化messge方法自定义提示及关闭】自定义方法如下：

const msgWarn=(dom,content,duration,onClose)=>{ // dom通常在methods方法内传this // content 返回错误提示消息（以分割） // duration 停留时间 // onClose 关闭回调 //自定义测试数据 conent="测试11111111111111111111111111 测试22222222222222222222 测试33333" let _node; // 创建 VNode const el=dom.$createElement; // 分割字符串 let contents = content.split(" "); // 接收信息 let arr=[]; contents.forEach(ele => { let innerText = el('div', { style: { color: '#000000A6',paddingRight:'13px',paddingLeft:'13px' } }, ele); arr.push(innerText) }); } // 定义关闭按钮 let innerIcon = el('a-icon', { style: { marginRight: '0px', marginLeft: '20px', color: '#ccc', cursor: 'pointer',position:'absolute',right:'-8px' }, attrs: { type: 'close' }, on: { click: () => _remove() } }) // 定义提示按钮 let warningIcon = el('a-icon', { style: { position:'absolute',left:'-8px' }, attrs: { type: 'warning' } }); arr.push(innerIcon); arr.push(warningIcon); // 自定义包装容器 let box=el('div', { style: { position:'relative',textAlign:'left' } }, arr); let container = el('span', {}, [box]); let defaultIcon=el('span',{},[]); // 调用内置message 组件 _node = dom.$message.warning({ content: container, duration: duration || 0, onClose: onClose, icon: defaultIcon }) // 全局配置 Vue.prototype.$msgWarn= msgWarn// 调用 this.$msgWarn(this,"my content");