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

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

image.png

自定义方法如下:

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");

你可能感兴趣的:(ant-design-vue优化messge方法自定义提示及关闭)