vue.js中toast用法及使用toast彈框的實(shí)例代碼
1.首先引入
import { Toast } from 'vant'
寫個(gè)小列子
綁定一個(gè)click事件
2.寫事件
在methods寫方法
showToast() { this.$toast({ message: "今日簽到+3", }) },
3.效果圖如下
一個(gè)簡(jiǎn)單的toast提示成就好了
下面通過實(shí)例代碼看下vue 中使用 Toast彈框
import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(ToastPlugin) Vue.use(ConfirmPlugin) Vue.use(AlertPlugin) //公用的彈窗(全局變量) Vue.prototype.showToast = function( showPositionValue,type,text,width="10em"){ this.$vux.toast.show({ showPositionValue: false, text: text, type: type, width: width, position: 'middle' }) } //公用alert confirm const Message = {}; Message.install = () => { const msg = { alert: config => { let def = { title:'提示', content:'系統(tǒng)異常,請(qǐng)重新登錄后再試!', buttonText:'確定' } if(typeof config === 'string' || typeof config === 'number'){ Vue.$vux.alert.show(Object.assign(def,{content:config})); }else{ Vue.$vux.alert.show(Object.assign(def,config)); } }, confirm: config => { let isConfirm = false; let def = { title:'提示', content:'系統(tǒng)異常,請(qǐng)重新登錄后再試!', confirmText:'確定', cancelText:'取消', onConfirm:() =>{ isConfirm = true; } } if(typeof config === 'string' || typeof config === 'number'){ Vue.$vux.confirm.show(Object.assign(def,{content:config})); }else{ Vue.$vux.confirm.show(Object.assign(def,config)); } /*return new Promise((resolve,reject) => { if(isConfirm){ resolve(); } })*/ }, } Object.entries(msg).forEach(([method,fn]) => { Vue.prototype[method] = fn; }) } Vue.use(Message) //使用例子 _this.confirm({ title:'提示', content: '確定要關(guān)閉訂單', onConfirm() { console.log('取消訂單了'); } });
總結(jié)
以上所述是小編給大家介紹的vue.js中toast用法及使用toast彈框的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 使用vue實(shí)現(xiàn)各類彈出框組件
- 詳解用vue編寫彈出框組件
- vue實(shí)現(xiàn)點(diǎn)擊出現(xiàn)操作彈出框的示例
- vue教程之toast彈框全局調(diào)用示例詳解
- vue+elementui實(shí)現(xiàn)點(diǎn)擊table中的單元格觸發(fā)事件--彈框
- vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果
- Vue.js彈出模態(tài)框組件開發(fā)的示例代碼
- elementUI vue this.$confirm 和el-dialog 彈出框 移動(dòng) 示例demo
- vue自定義彈框效果(確認(rèn)框、提示框)
- vue實(shí)現(xiàn)二級(jí)彈框案例
相關(guān)文章
Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見方式小結(jié)
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對(duì)象的常見操作技巧,需要的朋友可以參考下2019-02-02Vue中子組件調(diào)用父組件的3種方法實(shí)例
vue子組件調(diào)用父組件的方法其實(shí)不難,最近整理了一下,下面這篇文章主要給大家介紹了關(guān)于Vue中子組件調(diào)用父組件的3種方法,需要的朋友可以參考下2022-05-05vue?contextmenujs鼠標(biāo)右鍵菜單高度不夠顯示不全的問題及解決方法
這篇文章主要介紹了使用vue-contextmenujs鼠標(biāo)右鍵菜單時(shí),當(dāng)高度不夠時(shí)顯示不全的問題,大家需要注意本文給提供的解決方案雖然能夠解決現(xiàn)有問題,但是如果組件升級(jí)了,想要使用最新升級(jí)后的組件,還要再次修改代碼,需要的朋友可以參考下2022-07-07vue中如何攜帶參數(shù)跳轉(zhuǎn)頁(yè)面
這篇文章主要介紹了vue中如何攜帶參數(shù)跳轉(zhuǎn)頁(yè)面問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue+element樹組件 實(shí)現(xiàn)樹懶加載的過程詳解
這篇文章主要介紹了vue+element樹組件 實(shí)現(xiàn)樹懶加載的過程,本文通過圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10基于vue 動(dòng)態(tài)菜單 刷新空白問題的解決
這篇文章主要介紹了基于vue 動(dòng)態(tài)菜單 刷新空白問題的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08在vue中配置不同的代理同時(shí)訪問不同的后臺(tái)操作
這篇文章主要介紹了在vue中配置不同的代理同時(shí)訪問不同的后臺(tái)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09