封裝tips_2021-09-13

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。否則點擊遮罩層的時候會報錯


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末尚辑,一起剝皮案震驚了整個濱河市辑鲤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌杠茬,老刑警劉巖遂填,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異澈蝙,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)撵幽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進(jìn)店門灯荧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人盐杂,你說我怎么就攤上這事逗载。” “怎么了链烈?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵厉斟,是天一觀的道長。 經(jīng)常有香客問我强衡,道長擦秽,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任漩勤,我火速辦了婚禮感挥,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘越败。我一直安慰自己触幼,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布究飞。 她就那樣靜靜地躺著置谦,像睡著了一般堂鲤。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上媒峡,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天瘟栖,我揣著相機(jī)與錄音,去河邊找鬼丝蹭。 笑死慢宗,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的奔穿。 我是一名探鬼主播镜沽,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼贱田!你這毒婦竟也來了缅茉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤男摧,失蹤者是張志新(化名)和其女友劉穎蔬墩,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體耗拓,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡拇颅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了乔询。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片樟插。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖竿刁,靈堂內(nèi)的尸體忽然破棺而出乒验,到底是詐尸還是另有隱情改化,我是刑警寧澤度陆,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布亮蒋,位于F島的核電站,受9級特大地震影響负甸,放射性物質(zhì)發(fā)生泄漏流强。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一呻待、第九天 我趴在偏房一處隱蔽的房頂上張望煮盼。 院中可真熱鬧,春花似錦带污、人聲如沸僵控。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽报破。三九已至悠就,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間充易,已是汗流浹背梗脾。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留盹靴,地道東北人炸茧。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像稿静,于是被迫代替她去往敵國和親梭冠。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,747評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 包裝類(封裝類): 針對八種基本數(shù)據(jù)類型改备,定義相應(yīng)的引用類型控漠。 基本數(shù)據(jù)類型:boolean byte short...
    Girl_endless閱讀 318評論 0 0
  • 一、中間件 中間件是一個特殊的函數(shù)悬钳,該函數(shù)有三個主要的參數(shù) req,res,next 中間件的req,res是共享...
    sskingfly閱讀 432評論 0 0
  • 獲取列表數(shù)據(jù):Account.php DevCustomer model文件 DevCustomer.php 函數(shù)...
    一位先生_閱讀 379評論 0 0
  • private:私有盐捷,權(quán)限修飾符:用于修飾類中的成員(成員變量、成員函數(shù))默勾,私有只在本類中生效注意:私有僅僅是封裝...
    Denholm閱讀 128評論 0 0
  • 封裝(encapsulation):是指隱藏對象的屬性和實現(xiàn)細(xì)節(jié)碉渡,僅對外提供公共訪問方式 好處 1.將變化隔離2....
    Denholm閱讀 115評論 0 0