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'
})
}
最开始引入全局,在main.js中添加:import { MessageError, MessageInfo, MessageSuccess, MessageWarning, MessageBoxWarning, MessageBoxSuccess, MessageBoxInfo, MessageBoxError } from '@/utils/validate'
Vue.prototype.$MessageError = MessageError
Vue.prototype.$MessageInfo = MessageInfo
Vue.prototype.$MessageSuccess = MessageSuccess
Vue.prototype.$MessageWarning = MessageWarning
Vue.prototype.$MessageBoxWarning = MessageBoxWarning
Vue.prototype.$MessageBoxSuccess = MessageBoxSuccess
Vue.prototype.$MessageBoxInfo = MessageBoxInfo
Vue.prototype.$MessageBoxError = MessageBoxError
现在我们不这么写了,为了更好的拓展性,在main.js中添加以下两行代码:import messagebox from '@/utils/validate'
Vue.prototype.$MessageBox = messagebox
2、使用方法this.$MessageBox.MessageSuccess('成功删除数据')
this.$MessageBox.MessageBoxWarning('此操作将永久删除本次考试, 是否继续?').then(() => {
// 点击确定时执行的方法
request_post_data(api.baseExam.delete, { examBaseId: this.multipleSelection[0].id }).then(response => {
if (response.data.success) {
this.$MessageSuccess('成功删除数据')
this.getData()
} else {
this.$MessageError(response.data.Message)
}
})
}).catch(() => {
// 点击取消时执行方法
this.$MessageInfo('已取消删除')
})
}
如果想要将message改成模态窗口,还想要使用遮罩层,可以使用messageboxexport function msgWaring(text = 'Box') {
MessageBox.confirm(text, '提示', {
type: 'warning',
showCancelButton: false,
showConfirmButton: false
}).then(() => {
}).catch(() => {
})
}
注意一定要加then及catch。否则点击遮罩层的时候会报错
封装tips_2021-09-13
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 包装类(封装类): 针对八种基本数据类型,定义相应的引用类型。 基本数据类型:boolean byte short...
- 获取列表数据:Account.php DevCustomer model文件 DevCustomer.php 函数...
- private:私有,权限修饰符:用于修饰类中的成员(成员变量、成员函数),私有只在本类中生效注意:私有仅仅是封装...
- 封装(encapsulation):是指隐藏对象的属性和实现细节,仅对外提供公共访问方式 好处 1.将变化隔离2....