Vant 中的Toast设置全局的延迟时间操作

在引入Toast的配置文件里面配置如下：

import { Toast } from 'vant';
Vue.use(Toast);
Toast.setDefaultOptions({ duration: 800 });  // duration延迟时间

--完。

补充知识：vant ui库 toast 的使用及封装

最近在写一个项目，表单项较多，那必然前端做验证也是必须的了，一个一个写太繁琐，封装起来直接调用即可：

1、新建 toast.js

import { Toast } from 'vant'
import 'vant/lib/index.css'

export function toast(message, duration = 1000) {
  Toast({
    message, duration
  });
 }

2、在组件中使用

import { toast } from'../assets/js/toast'

toast('提示信息');

以上这篇Vant 中的Toast设置全局的延迟时间操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vant中 tab栏遇到的坑 van-tabs

    话不多说,先看下问题描述: 我的需求:(和头条的tab栏类似 ,单击查看头条tab栏) 点击tab栏,下方展示出来当前tab栏下的内容列表(A页面),点击列表进入详情内容(B页面),但是返回(A页面)的时候,需要显示刚才被点击的tab栏高亮显示.(如果tab栏横向有滚动条,那也得让被选中的高亮显示). 所以,大部分人的解决办法就是将当前选中的tab的索引缓存起来,等回到该页面的时候,让被缓存的那个高亮显示出来. 坑的问题在于:van-tabs,里面的v-model默认值是0,但是类型却写着 nu

  • vantUI 获得piker选中值的自定义ID操作

    问题 官网中给的picker例子,每项只能是个字符串,但我需要它返回每个字符串对应的自定义ID,而不是index. vantUI官网:picker 官网例子 <van-picker :columns="columns" @change="onChange" /> export default { data() { return { columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] }; }, methods: { onCha

  • 在vant中使用时间选择器和popup弹出层的操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <div class="page"> <van-cell-group> <van-cell title="选择日期" :value="datetime" arrow @click="showDatePicker = !showDatePicker" ></van-cell> </van-cell-g

  • 解决vant title-active-color与title-inactive-color不生效问题

    1.创建vue项目 2.使用vant组件 npm install vant --S 全局引用时在main.js引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 假如你引入之后发现页面的样式和组件都挂载了,但是console控制台会报错,说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题,重新下载一个最新的vant就可以了,现在是2.6.0版本 好,接下来继续 在需要使用下拉

  • vant picker+popup 自定义三级联动案例

    picker选择器的数据由columns属性控制,columns中有几个元素就代表该选择器有多少级,通过change方法来给对应列赋值. columns = [{ values: column1, // 对应列的值 defaultIndex: 0, // 默认选中项索引 className: 'class1' // 对应列的类名 }, { values: [], defaultIndex: 0, className: 'class2' }, { values: [], defaultIndex:

  • vant 时间选择器--开始时间和结束时间实例

    我就废话不多说了,大家还是直接看代码吧~ <template> <div class="linesMigrate"> <div class="conditionDiv"> <div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChooseStart"> <div

  • 解决vant-UI库修改样式无效的问题

    最近用vue写页面时,发现使用vant的有些UI组件,而又不能满足自己的样式,修改CSS样式还是无效.css一般都会使用sass或者less,加了scoped后修改的样式不起作用,即使加了important也没用 vue项目中,当<style>标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中. 解决办法: 1.对于css语法起作用 使用深度选择器,使用 >>> 操作符,将scoped样式中的选择器"深入"

  • 浅谈vant组件Picker 选择器选单选问题

    1.写遮罩 2.定义data 3.写事件 4.效果图 补充知识:vue使用vant编辑用户性别 我就废话不多说了,大家还是直接看代码吧~ <van-cell title="性别" is-link :value="user.gender===1?'男':'女'" @click="isEditGenderShow=true"></van-cell> <!-- 编辑用户性别 --> <van-action-sh

  • vue 使用vant插件做tabs切换和无限加载功能的实现

    样例: 1.创建vue项目,不再详述 2.引入vant 之前用过很多插件做这个功能,但是效果都不尽人意,出现各种问题,直到遇到vant这个插件,完美的解决了这些小问题,如有问题,欢迎联系我 安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 3.在页面中使用 官方写的比我写的好多了,大家可以借鉴,看源代码可能比官方给的文档更直观 官方文档 我在文件中

  • Vant 中的Toast设置全局的延迟时间操作

    在引入Toast的配置文件里面配置如下: import { Toast } from 'vant'; Vue.use(Toast); Toast.setDefaultOptions({ duration: 800 }); // duration延迟时间 --完. 补充知识:vant ui库 toast 的使用及封装 最近在写一个项目,表单项较多,那必然前端做验证也是必须的了,一个一个写太繁琐,封装起来直接调用即可: 1.新建 toast.js import { Toast } from 'van

  • Python中使用socks5设置全局代理的方法示例

    0x01介绍 PySocks使您可以通过SOCKS和HTTP代理服务器发送流量.它是SocksiPy的现代分支,具有错误修复和其他功能. 0x02 安装 λ pip3 install Pysocks 0x03 测试 正常请求,httperror无法获得 加入socks5代理后,可以获得当前程序的全局代理可以 正常访问 import socket import socks socks.set_default_proxy(socks.SOCKS5, "127.0.0.1", 10808)

  • vant中的toast层级改变操作

    1.toast在main.js中引用 2.在每个页面中使用toast 3.每个页面有一个私有样式scoped,因此类名inexa的层级写在app.vue里 注:toast每调用一次(z-index)层级就会加一,因为默认打开了新窗口,层级会加一 补充知识:vant-ui toast和dialog使用 vant-ui中的toast和dialog使用 Toast('提示') Dialog({ message: '提示' }) //直接用官网的写法会报未定义 应该这样写 this.$toast('提示

  • 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的问题及解决

    全局引入vant后使用Toast的问题及解决

    目录 全局引入vant后使用Toast问题 1.Toast 的使用(官方) 2.问题 3.解决 小程序中引入vant-weapp toast组件踩坑(Toast不显示) 全局引入vant后使用Toast问题 1.Toast 的使用(官方) 1.1 引入 import Vue from 'vue'; import { Toast } from 'vant'; Vue.use(Toast); 1.2 使用 Toast('提示内容') 2.问题 当全局引入 vant 时候,直接使用 Toast('提示

  • vant中如何修改用户的头像

    vant中如何修改用户的头像

    目录 vant修改用户的头像 vant实现纯客户端用户头像上传预览 vant修改用户的头像 我们的项目中经常会遇到用户个人信息的修改,当然用的组件就是 vant 中的 van-uploader 组件, 但是这个组的是有一个回显功能的, 它的样式不太符合我们, 更改用户头像的场景 对比一下 van-uploader 的本来的样式是这样的 而我们需要修改用户头像的样式是这样的 我们的需求就是 上传完图像之后, 再次点击头像, 还可以再次上传一个新的头像, 这样的需求, van-uploader 中的

  • vant中list的使用以及首次加载触发两次解决问题

    目录 vant中list使用及首次加载触发两次 首次加载触发两次解决问题 vant中list列表组件使用 1. 基础结构 3.methods定义方法 4.调用api渲染页面 vant中list使用及首次加载触发两次 以下是list的基本使用方法,主要原理就是当页面数据小于offset这个高度的时候,就会触发load,在load里面需要调用接口发送下一页的数据.所以发送完毕后需要将设置分页的属性加一,并将获取到的新值push进接收数据的数组里,而不是直接赋值,如果直接赋值那么数组里就只有新值,之前

  • 详解Android中的Toast源码

    Toast源码实现 Toast入口     我们在应用中使用Toast提示的时候,一般都是一行简单的代码调用,如下所示: [java] view plaincopyprint?在CODE上查看代码片派生到我的代码片 Toast.makeText(context, msg, Toast.LENGTH_SHORT).show(); makeText就是Toast的入口,我们从makeText的源码来深入理解Toast的实现.源码如下(frameworks/base/core/java/android

  • 第三方包jintellitype实现Java设置全局热键

    Java原生API并不支持为应用程序设置全局热键.要实现全局热键,需要用JNI方式实现,这就涉及到编写C/C++代码,这对于大多数不熟悉C/C++的javaer来说,有点困难.不过幸好,国外有人已经实现了,发布成第三方java包,借此,我们可以很方便的设置全局热键而不用编写任何C/C++代码. jintellitype官网貌似目前访问不到,这里提供下载:http://www.jb51.net/softs/217788.html. jintellitype由两部分组成,一部分是java写的jint

  • Vue2.0设置全局样式(less/sass和css)

    Vue2.0设置全局样式(less/sass和css)

    为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可) 第一步:在src目录下的main.js,也就是入口文件里面添加下面代码 require('!style-loader!css-loader!less-loader!./common/less/index.less') 在Vue1.0版本中可以这样写,但是2.0版本中就不行,会报错提示解析错误 require('./common/less/index.less') 第二步:在build目录下的webpack.base.c

随机推荐