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

2021-05-20  本文已影响0人  哈哈乐乐WXT

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

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");
上一篇 下一篇

猜你喜欢

热点阅读