vue 对element的弹框Message的二次封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import { Message, MessageBox } from 'element-ui'

let _common = {}

_common = {
  MessageError: MessageError,
  MessageInfo: MessageInfo,
  MessageSuccess: MessageSuccess,
  MessageWarning: MessageWarning,
  MesssageBoxQuestion: MesssageBoxQuestion,
  MessageBoxSuccess: MessageBoxSuccess,
  MessageBoxInfo: MessageBoxInfo,
  MessageBoxError: MessageBoxError
}

export default _common

export function MessageError(text = '错误',) {
  Message({
    message: text,
    type: 'error',
    duration: 3 * 1000
  })
}
export function MessageInfo(text = '取消') {
  Message({
    message: text,
    type: 'info',
    duration: 3 * 1000
  })
}
export function MessageSuccess(text = '成功') {
  Message({
    message: text,
    type: 'success',
    duration: 3 * 1000
  })
}

export function MessageWarning(text = '警告') {
  Message({
    message: text,
    type: 'warning',
    duration: 3 * 1000
  })
}

export function MesssageBoxQuestion(text = 'Box询问') {
  return MessageBox.confirm(text, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
}

export function MessageBoxSuccess(text = 'Box成功') {
  return MessageBox.confirm(text, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'success'
  })
}

export function MessageBoxInfo(text = 'Box取消') {
  return MessageBox.confirm(text, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  })
}

export function MessageBoxError(text = 'Box错误') {
  return MessageBox.confirm(text, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  })
}

//将message改成模态窗口+遮罩层
//注意一定要加then及catch。否则点击遮罩层的时候会报错
export function msgWaring(text = 'Box') {
  MessageBox.confirm(text, '提示', {
    type: 'warning',
    showCancelButton: false,
    showConfirmButton: false
  }).then(() => {
  }).catch(() => {
  })
}

1
2
3
import messagebox from '@/utils/validate'
Vue.prototype.$MessageBox = messagebox

1
2
this.$MessageBox.MessageSuccess('成功删除数据')