欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.js中toast用法及使用toast彈框的實(shí)例代碼

 更新時(shí)間:2018年08月27日 10:59:09   作者:新葉之扉之丹兒  
這篇文章主要介紹了vue.js中toast用法及使用toast彈框的實(shí)例代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒加載,需要的朋友可以參考下

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)站的支持!

相關(guān)文章

最新評(píng)論