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+element-ui 的Table二次封裝的實(shí)現(xiàn)
這篇文章主要介紹了基于Vue+element-ui 的Table二次封裝的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法
下面小編就為大家分享一篇淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Electron+Vue實(shí)現(xiàn)截屏功能的兩種方式
在Electron環(huán)境下,截屏功能相對(duì)強(qiáng)大,可以通過desktopCapturer獲取應(yīng)用視頻流,實(shí)現(xiàn)對(duì)整個(gè)應(yīng)用的截屏,而在非Electron環(huán)境下,截屏功能受限,只能截取瀏覽器內(nèi)容,且存在iframe或base64圖片加載問題2024-10-10
vuex模塊獲取數(shù)據(jù)及方法的簡(jiǎn)單示例
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于vuex模塊獲取數(shù)據(jù)及方法的相關(guān)資料,需要的朋友可以參考下2023-03-03
Vue3中關(guān)于ref和reactive的區(qū)別分析
這篇文章主要介紹了vue3關(guān)于ref和reactive的區(qū)別分析,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-06-06
如何基于uniapp開發(fā)android播放webrtc流詳解
這篇文章主要介紹了在uniapp中播放RTSP和WebRTC協(xié)議流的區(qū)別,以及如何封裝WebrtcVideo組件和音視頻實(shí)時(shí)通訊的實(shí)現(xiàn),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
vue3+Element Plus實(shí)現(xiàn)自定義穿梭框的詳細(xì)代碼
找到一個(gè)好用的vue樹形穿梭框組件都很難,又不想僅僅因?yàn)橐粋€(gè)穿梭框在element-ui之外其他重量級(jí)插件,本文給大家分享vue3+Element Plus實(shí)現(xiàn)自定義穿梭框的示例代碼,感興趣的朋友一起看看吧2024-01-01

