vue中使用vant的Toast轻提示报错的解决

目录
  • 使用vant的Toast轻提示报错
  • 提示信息弹出（toast）
    • 实现过程如下

使用vant的Toast轻提示报错

记录一下今天使用vant中的Toast 轻提示，按照官方文档中的方法去使用发现报错使用不了。

文档中是这样写的

Toast.success('成功文案');
Toast.fail('失败文案');

main.js中引用vant后直接调用Toast报错。

实际使用是这样写

this.$toast.success("成功文案");
this.$toast.fail("失败文案");

和调用路由一样需要this点出来。

提示信息弹出（toast）

使用普通的alret();可以实现弹出框，但是不够美观。移动端框架AUI提供了一种弹出样式

AUI官网地址：http://www.auicss.com/

实现过程如下

第一步：在<head>里引入AUI的css和toast.js文件。

<link rel="stylesheet" type="text/css" href="aui-20170109-v2.1/css/aui.css" rel="external nofollow"  />
<link rel="stylesheet" type="text/css" href="aui-20170109-v2.1/css/aui-toast.css" rel="external nofollow"  />
 

第二步：设置触发函数。（例如给一个按钮设置点击函数）。

<div class="aui-btn aui-btn-info aui-btn-block" onclick="return errorTest()">注册</div>

第三步：编写函数内容：

function errorTest() {
   var toast = new auiToast();
   toast.success({
      title:"提交成功",
      duration:2000
   });//成功类
 
   toast.fail({
      title:"提交失败",
      duration:2000
   });//失败类
 
   toast.custom({
      title:"成功给了一个赞",
      html:'<i class="aui-iconfont aui-icon-laud"></i>',
      duration:2000
   });自定义图标
 
   toast.loading({ 
      title:"加载中",
      duration:2000
   },function(ret){ 
        console.log(ret);
        setTimeout(function(){
           toast.hide();
        }, 3000)
   });加载中：
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vant中的toast轻提示实现代码

    在main.js中按需引入 import { Toast } from 'vant Vue.use(Toast) 页面中的methods中使用 send(name, img) { let msg = `${this.Cname}送${name}1`; this.$toast({ message: msg, icon: img }); }, 补充知识:Vant的Toast 轻提示API文档不准确解决方案 开发企业微信应用使用Vant组件库过程中,想要用到轻提示Toast,发现API文档无法使用:

  • 解决vant的Toast组件时提示not defined的问题

    按照官方文档引入全局Toast组件,在methods里面定义函数执行函数时产生了报错: //定义的函数 handleClick(){ Toast('点击提示') } 报错信息 [Vue warn]: Error in v-on handler: "ReferenceError: Toast is not defined" 解决方法: handleClick(){ this.$toast('点击提示') } 补充知识:vue+vant移动端遇到的那些问题 1.项目引用了lib-flexi

  • vue如何实现Toast轻提示

    vue如何实现Toast轻提示

    目录 vue实现Toast轻提示 首先创建一个toast组件 在js文件中引入组件 在入口文件中引入上面这个js文件 下面就可以在view里全局使用了 使用vant的Toast轻提示报错 文档中是这样写的 实际使用是这样写 vue实现Toast轻提示 首先创建一个toast组件 <template>   <div class="context" v-show="isshow">     <span class="tip&quo

  • vue中使用vant的Toast轻提示报错的解决

    目录 使用vant的Toast轻提示报错 提示信息弹出(toast) 实现过程如下 使用vant的Toast轻提示报错 记录一下今天使用vant中的Toast 轻提示,按照官方文档中的方法去使用发现报错使用不了. 文档中是这样写的 Toast.success('成功文案'); Toast.fail('失败文案'); main.js中引用vant后直接调用Toast报错. 实际使用是这样写 this.$toast.success("成功文案"); this.$toast.fail(&qu

  • Android线程中设置控件的值提示报错的解决方法

    本文实例讲述了Android线程中设置控件的值提示报错的解决方法.分享给大家供大家参考,具体如下: 在Android线程中设置控件的值一般会与Handler联合使用,如下: package com.yarin.android.Examples_04_15; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import andro

  • vue 中使用 watch 出现了如下的报错的原因分析

    报错: Method "watch" has type "object" in the component definition. Did you reference the function Method "watch" has type "object" in the component definition. Did you reference the function correctly? 原因: watch 是一个对

  • JavaScript中的单引号和双引号报错的解决方法

    在使用JavaScript显示消息或者传递字符数据的时候,经常会碰到数据中夹杂单引号(')或者双引号("),这种语句往往会造成JavaScript报错.对此一般采用/'或者/"的解决. 例如: Alert("this is test "message"!"); Alert('this is test 'message'!'); 一般会改成以下语句 Alert("this is test /"message/"!&qu

  • vue cli2 和 cli3去掉eslint检查器报错的解决

    vue cli2 和 cli3去掉eslint检查器报错的解决

    目录 cli2去掉eslint检查器报错 cli3去掉eslint检查器报错 vue-cli3取消eslint检查 cli2去掉eslint检查器报错 eslint在编写过程中及其严格,甚至单引号和双引号或者空格注释都会引起报错,导致项目无法正常运行 因此,只需要在build文件夹下,找到webpack.base.conf.js文件 将下面一行代码注释掉,即可正常编译了 cli3去掉eslint检查器报错 vue-cli3取消eslint检查 实际上在学习过程中,你会发现eslint 检查特别讨

  • 在vue中使用vant TreeSelect分类选择组件操作

    中文文档:TreeSelect 分类选择 效果展示: //先在你需要的页面中引入,第一个是弹出层,第二个是选择的 import { Popup } from "vant"; import { TreeSelect } from "vant"; 代码部分: <van-popup v-model="policeShow" position="top" :overlay="true"> <van

  • vue中使用svg封装全局消息提示组件

    vue中使用svg封装全局消息提示组件

    本文实例为大家分享了vue中使用svg封装全局消息提示组件的具体代码,供大家参考,具体内容如下 先看效果图 一.首先安装下载需要用到的svg相关依赖 npm install svg-sprite-loader --save-dev 二.针对没有vue.config.js文件的vue项目,直接在webpack.base.conf.js中进行如下两个配置 1.找到图片相关配置位置,添加款选出的代码 2.在图片配置后添加如下代码 三.根据添加的代码我们去src下创建一个icons文件夹,icons下面

  • Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法

    在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失,最近研究了一下这个问题的原因和解决办法,这里和大家分享一下. 1.闪现的原因 这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况.因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue才会执行相应的JS代码. 2.解决的办法 其实在了解了原因之后我们就有了大概的思路,既然是在JS执行之前会出

随机推荐