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
現(xiàn)在我們不這么寫了蚜厉,為了更好的拓展性,在main.js中添加以下兩行代碼:import messagebox from '@/utils/validate'
Vue.prototype.$MessageBox = messagebox
2捡硅、使用方法this.$MessageBox.MessageSuccess('成功刪除數(shù)據(jù)')
this.$MessageBox.MessageBoxWarning('此操作將永久刪除本次考試, 是否繼續(xù)?').then(() => {
// 點擊確定時執(zhí)行的方法
request_post_data(api.baseExam.delete, { examBaseId: this.multipleSelection[0].id }).then(response => {
if (response.data.success) {
this.$MessageSuccess('成功刪除數(shù)據(jù)')
this.getData()
} else {
this.$MessageError(response.data.Message)
}
})
}).catch(() => {
// 點擊取消時執(zhí)行方法
this.$MessageInfo('已取消刪除')
})
}
如果想要將message改成模態(tài)窗口秉继,還想要使用遮罩層祈噪,可以使用messageboxexport function msgWaring(text = 'Box') {
MessageBox.confirm(text, '提示', {
type: 'warning',
showCancelButton: false,
showConfirmButton: false
}).then(() => {
}).catch(() => {
})
}
注意一定要加then及catch。否則點擊遮罩層的時候會報錯
封裝tips_2021-09-13
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門灯荧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人盐杂,你說我怎么就攤上這事逗载。” “怎么了链烈?”我有些...
- 文/不壞的土叔 我叫張陵厉斟,是天一觀的道長。 經(jīng)常有香客問我强衡,道長擦秽,這世上最難降的妖魔是什么? 我笑而不...
- 正文 為了忘掉前任漩勤,我火速辦了婚禮感挥,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘越败。我一直安慰自己触幼,他們只是感情好,可當(dāng)我...
- 文/花漫 我一把揭開白布究飞。 她就那樣靜靜地躺著置谦,像睡著了一般堂鲤。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上媒峡,一...
- 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼贱田!你這毒婦竟也來了缅茉?” 一聲冷哼從身側(cè)響起,我...
- 正文 年R本政府宣布亮蒋,位于F島的核電站,受9級特大地震影響负甸,放射性物質(zhì)發(fā)生泄漏流强。R本人自食惡果不足惜,卻給世界環(huán)境...
- 文/蒙蒙 一呻待、第九天 我趴在偏房一處隱蔽的房頂上張望煮盼。 院中可真熱鬧,春花似錦带污、人聲如沸僵控。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽报破。三九已至悠就,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間充易,已是汗流浹背梗脾。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 包裝類(封裝類): 針對八種基本數(shù)據(jù)類型改备,定義相應(yīng)的引用類型控漠。 基本數(shù)據(jù)類型:boolean byte short...
- 獲取列表數(shù)據(jù):Account.php DevCustomer model文件 DevCustomer.php 函數(shù)...
- private:私有盐捷,權(quán)限修飾符:用于修飾類中的成員(成員變量、成員函數(shù))默勾,私有只在本類中生效注意:私有僅僅是封裝...
- 封裝(encapsulation):是指隱藏對象的屬性和實現(xiàn)細(xì)節(jié)碉渡,僅對外提供公共訪問方式 好處 1.將變化隔離2....