iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中使用vant的Toast轻提示报错的解决
  • 190
分享到

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

2024-04-02 19:04:59 190人浏览 安东尼
摘要

目录使用vant的Toast轻提示报错提示信息弹出(toast)实现过程如下使用vant的Toast轻提示报错 记录一下今天使用vant中的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)
   });加载中:
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue中使用vant的Toast轻提示报错的解决

本文链接: https://www.lsjlt.com/news/149832.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中使用vant的Toast轻提示报错的解决
    目录使用vant的Toast轻提示报错提示信息弹出(toast)实现过程如下使用vant的Toast轻提示报错 记录一下今天使用vant中的Toast 轻提示,按照官方文档中的方法去...
    99+
    2024-04-02
  • vue中如何使用vant的Toast轻提示报错
    今天小编给大家分享一下vue中如何使用vant的Toast轻提示报错的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用van...
    99+
    2023-06-30
  • 全局引入vant后使用Toast的问题及解决
    目录全局引入vant后使用Toast问题1.Toast 的使用(官方)2.问题3.解决小程序中引入vant-weapp toast组件踩坑(Toast不显示)全局引入vant后使用T...
    99+
    2024-04-02
  • Vue中使用stylus报错的解决
    目录一、正常配置stylus流程二、解决bug一、正常配置stylus流程 1.安装stylus、stylus-loader依赖(进入项目文件夹下) cnpm install sty...
    99+
    2022-11-13
    Vue中stylus报错 使用stylus报错 Vue stylus
  • 如何使用flexible的Vue组件Toast显示框
    这篇文章将为大家详细讲解有关如何使用flexible的Vue组件Toast显示框,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Toast -- 显示框效果展示 ...
    99+
    2024-04-02
  • 如何在vue中解决提示警告for循环报错的问题
    这篇文章将为大家详细讲解有关如何在vue中解决提示警告for循环报错的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。警告1.出现这个警告问题的时候 我们可以去main...
    99+
    2024-04-02
  • 使用vue-touch报priority错误的解决
    目录解决vue-touch报priority错误使用vue-touch遇到的坑会使手机列表不能滑动解决方法解决vue-touch报priority错误 用vue2.0开发的项目需要安...
    99+
    2024-04-02
  • 关于vue中使用three.js报错的解决方法
    目录前言1. vue的问题?2. Proxy的异常情况3. Three.js 的问题4. defineProperty异常情况5. 解决总结前言 最近在学习three.js,同时也学...
    99+
    2024-04-02
  • 使用@Autowired注解有错误提示的解决
    目录使用@Autowired注解有错误提示处理方式@Resource注解与@Autowired注解的异同点Spring的@Autowired注解报错改为警告使用@Autowired注...
    99+
    2024-04-02
  • vue提示警告for循环报错怎么解决
    这篇文章主要介绍“vue提示警告for循环报错怎么解决”,在日常操作中,相信很多人在vue提示警告for循环报错怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue提示警告for循环报错怎么解决”的疑...
    99+
    2023-07-04
  • vue-cli3在main.js中console.log()会报错的解决
    目录在main.js中console.log()报错问题重新console.log()输出没效果问题第一种第二种在main.js中console.log()报错 问题重新 在main...
    99+
    2024-04-02
  • 小程序使用Vant组件时报错Failed to load font解决方法
    小程序引用Vant组件后每次重新编译都会报错 [渲染层网络层错误] Failed to load font https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff2t=16490839529...
    99+
    2023-09-03
    小程序 微信小程序 前端
  • nginx使用rewrite报错的解决
    目录项目场景:问题描述原因分析:解决方案:项目场景: 今天编译安装nginx的时候想着要做rewrite功能,匆忙瞟了一眼编译文档就直接make&&make inst...
    99+
    2023-03-08
    nginx rewrite报错 nginx rewrite
  • 怎么解决使用@Autowired注解有错误提示
    本篇内容主要讲解“怎么解决使用@Autowired注解有错误提示”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么解决使用@Autowired注解有错误提示”吧!使用@Autowired注解有错...
    99+
    2023-06-25
  • 解决Python中使用pd.read_excel报错的问题
    解决Python中使用pd.read_excel报错的问题 在Python中,我们常常需要读取Excel表格文件来进行数据分析和处理。其中,pandas库的read_excel函数是一个十分常用的方法...
    99+
    2023-09-01
    python excel 开发语言
  • Vue使用echarts的完整步骤及解决各种报错
    前言: Echarts,它是一个与框架无关的 JS 图表库,但是它基于Js,这样很多框架都能使用它,例如Vue,估计IONIC也能用,下次研究。 因为我的习惯,每次新尝试做一个功能的...
    99+
    2024-04-02
  • 如何解决vue中axios封装请求状态的错误提示问题
    这篇文章主要介绍了如何解决vue中axios封装请求状态的错误提示问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。如下所示: import...
    99+
    2024-04-02
  • Vue中引入swiper报错的问题及解决
    目录首先上报错信息下载swiper6.x版本首先上报错信息 -----------更新------------------------------------------- 都是由于...
    99+
    2022-11-13
    Vue引入swiper swiper报错 Vue引入swiper报错
  • 常见的PHP.ini提示报错及解决方法有哪些
    这篇文章主要介绍“常见的PHP.ini提示报错及解决方法有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“常见的PHP.ini提示报错及解决方法有哪些”文章能帮助大家解决问题。PHP.ini fi...
    99+
    2023-07-05
  • vue-editor-bridge报错的解决方案
    目录vue-editor-bridge报错问题* ../../vue-temp/vue-editor-bridge报错爬坑解决vue-editor-bridge报错问题  ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作