欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue.js中toast用法及使用toast弹框的实例代码

程序员文章站 2022-06-30 10:58:56
1.首先引入 import { toast } from 'vant' 写个小列子 绑定一个click事件 2.写事件 在methods写方法...

1.首先引入

import { toast } from 'vant'

写个小列子

绑定一个click事件

vue.js中toast用法及使用toast弹框的实例代码

2.写事件

在methods写方法

showtoast() {
    this.$toast({
     message: "今日签到+3",
     })
  },

3.效果图如下

vue.js中toast用法及使用toast弹框的实例代码

一个简单的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:'系统异常,请重新登录后再试!',
    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:'系统异常,请重新登录后再试!',
    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弹框的实例代码,希望对大家有所帮助