最近项目需求接口返回错误提示，可自动换行且手动关闭
image.png
自定义方法如下：
const msgWarn=(dom,content,duration,onClose)=>{
// dom 通常在methods方法内传this
// content 返回错误提示消息（以<br/>分割）
// duration 停留时间
// onClose 关闭回调
//自定义测试数据
conent="测试11111111111111111111111111<br/>测试22222222222222222222<br/>测试33333"
let _node;
// 创建 VNode
const el=dom.$createElement;
// 分割字符串
let contents = content.split("<br/>");
// 接收信息
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");
