vue.js中toast用法及使用toast彈框的實例代碼
更新時間:2018年08月27日 10:59:09 作者:新葉之扉之丹兒
這篇文章主要介紹了vue.js中toast用法及使用toast彈框的實例代碼,本文給大家介紹的非常詳細,具有一定的參考借鑒加載,需要的朋友可以參考下
1.首先引入
import { Toast } from 'vant'
寫個小列子
綁定一個click事件

2.寫事件
在methods寫方法
showToast() {
this.$toast({
message: "今日簽到+3",
})
},
3.效果圖如下

一個簡單的toast提示成就好了
下面通過實例代碼看下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)異常,請重新登錄后再試!',
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)異常,請重新登錄后再試!',
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: '確定要關閉訂單',
onConfirm() {
console.log('取消訂單了');
}
});
總結
以上所述是小編給大家介紹的vue.js中toast用法及使用toast彈框的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式,結合實例形式總結分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對象的常見操作技巧,需要的朋友可以參考下2019-02-02
vue?contextmenujs鼠標右鍵菜單高度不夠顯示不全的問題及解決方法
這篇文章主要介紹了使用vue-contextmenujs鼠標右鍵菜單時,當高度不夠時顯示不全的問題,大家需要注意本文給提供的解決方案雖然能夠解決現(xiàn)有問題,但是如果組件升級了,想要使用最新升級后的組件,還要再次修改代碼,需要的朋友可以參考下2022-07-07
vue+element樹組件 實現(xiàn)樹懶加載的過程詳解
這篇文章主要介紹了vue+element樹組件 實現(xiàn)樹懶加載的過程,本文通過圖文實例代碼相結合給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10

