message提示框的三种显示方式

message提示框的三种显示方式

1. 在store.js中使用封装的message提示组件

/*
提示信息封装组件
*/
export function messageTips (message, str, type) {
  if (str !== '') {
    message.destroy()
    message.config({
      top: document.documentElement.clientHeight - 200,
      duration: 5
    })
  }
  switch (type) {
    case 'success':
      message.success(str)
      break
    case 'warning':
      message.warning(str)
      break
    case 'error':
      message.error(str)
      break
    case 'info':
      message.info(str)
      break
    default:
      message.warning(str)
  }
}

在store.js引入该封装的组件，

import { messageTips } from '../../components/common/utils'

在联调的接口中使用：

1. 在某个组件中使用封装的message提示组件

// 引入封装的组件
import { messageTips } from '../../components/common/utils'
// 使用
messageTips(this.$root.$message, '无散点图', 'info')

1. 直接使用ant的全局提示message

this.$message.warning('无散点图')