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


Posted in Javascript onNovember 04, 2020

在引入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设置全局的延迟时间操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
简单的分页代码js实现
May 17 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
vue实现在线学生录入系统
May 30 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 #Javascript
Vue获取微博授权URL代码实例
Nov 04 #Javascript
基于vue实现微博三方登录流程解析
Nov 04 #Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 #Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 #Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 #Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 #Javascript
You might like
php 读写json文件及修改json的方法
2018/03/07 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
JavaScript中的关键字"VAR"使用详解 分享
2013/07/31 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
回顾Javascript React基础
2019/06/15 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
python发腾讯微博代码分享
2014/01/10 Python
Python入门篇之面向对象
2014/10/20 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
详解Django框架中的视图级缓存
2015/07/23 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
Python项目打包成二进制的方法
2020/12/30 Python
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
培训班主持词
2014/03/28 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
JavaScript 原型与原型链详情
2021/11/02 Javascript