Vant 使用之Toast Vant安装和使用
Vant 是一个VUE 的移动端组件库，里面有很多好用的组件。
第一步，安装和配置 Vant
npm i vant -Snpm i babel-plugin-import -D安装完成之后，在项目 .babelrc 文件修改配置 plugins
"plugins": [["import", {"libraryName": "vant","libraryDirectory": "es","style": true}]
]到这里，Vant 算是安装配置完成了，下面开始使用它的组件
第二步，使用 Vant 的 Toast 组件 官方文档链接
先看一下页面中使用 Toast 的效果图，
附赠一个简单的验证码倒计时实现代码（限于GIF大小限制，我传了5秒的倒计时，可自行修改）
在 main.js 里面导入 Vant ，这里我只导入了 vant 的 Toast 组件
import { Toast } from 'vant';
Vue.use(Toast);最后在页面组件里面使用它，下面贴上页面组件的完整代码
<template><div id="ca"><div class="bindPhone">绑定手机</div><div style="height: 6.375rem;"></div><img class="xxx" @click="phone_val=''" v-if="this.phone_val" src="../../../static/images/xxx.png" /><input v-model='phone_val' class="phone_input" type="number" maxlength="11" placeholder="输入手机号" /><div class="code" @click="getCode">{{code}}</div><input placeholder="输入验证码" /><button class="btn">下一步</button></div>
</template><script>var that;export default {data() {return {msg: '',phone_val: '',code: '获取验证码'}},methods: {outTime(time) {setTimeout(function() {if (time == 0) {that.code = '获取验证码';return}time--var mm = time >= 10 ? time : '0' + time;that.code = '00:' + mm;that.outTime(time)}, 1000);},getCode() {console.log('点击获取验证码，手机号为：', this.phone_val);this.outTime(30);if (this.phone_val.length == 11) {} else {// this.toToast('手机号码不正确，请重新输入')}},toToast(txt) {this.$toast({message: txt,position: 'top'});}},mounted() {that = this;console.log('asas')}}
</script><style>.xxx {margin-top: 5px;position: absolute;right: 2.125rem;width: 0.9rem;height: 0.9rem;background: #808080;border-radius: 50%;padding: 0.25rem;}.code {position: absolute;width: 3.8rem;text-align: center;right: 2.125rem;background: #F2F2F2;color: #9E9E9E;padding: 8px 16px 8px 16px;margin-top: -6px;border-radius: 50px;font-size: 0.75rem;}#ca {background: white;height: 1000px;}.btn {outline: none;width: 80%;margin-left: 10%;margin-top: 7rem;height: 3rem;border: none;border-radius: 3.125rem;background: #F2F2F2;color: #9E9E9E;}input::-webkit-input-placeholder {color: #d0d0d0;}.bindPhone {margin-top: 2.2rem;margin-left: 2rem;font-size: 1.875rem;}input {outline: none;/* 修改input选中的默认边框样式 */caret-color: #7BEDD4;/* 修改input的选中时的光标颜色 */border: none;/* 修改input的选中时的默认边框 */font-size: 1.1rem;margin-left: 2rem;padding-bottom: 0.7rem;border-bottom: 2px solid #f3f3f3;width: 82%;}.phone_input {margin-bottom: 2.5rem;}
</style>
相关文章：
15-5重构_重构-糟糕，我一直在向后做。
15-5重构by Justin Fuller贾斯汀富勒(Justin Fuller) 重构-糟糕，我一直在向后做。 (Refactoring — oops, I’ve been doing it backwards.) Welcome to my intervention. I’m a refactoring addict and I’m not afraid to admit it, but there’s only one prob…
JPush 使用教程
JPush 使用教程 自己使用的一些经验，为了方便直接从这里复制过去就行。 就当做个笔记，防止长时间忘记之后，还需要去官网看文档。 主要思路： sdk文件 三方依赖系统库 头文件 添加代理 初始化代码 1.版本信息 JPush : 2.2.0 Xco…
浏览器常见兼容性问题汇总
1、随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大，解决方案是：*{margin:0;padding:0;} 2、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大，常出现…
VUE 动态绑定class
第一种：通过一个布尔值判断样式类是否生效 //isActive 是在data里面布尔值， rotateRight 是 class 样式类 //isActive 为true时样式类 rotateRight 生效 <div :class"{rotateRight:isActive}">abs</div> 第二种：通…
低声教育_我内心低声说：“成为建设者”
低声教育by Rebecca Radding由丽贝卡拉丁(Rebecca Radding) 我内心低声说：“成为建设者” (Something within me whispered: “Be the builder”) 加沙代码学院前任主持人Yasmin Hillis(自称嬉皮士)是一个内心的嬉皮士，她谈到了弗吉尼亚伍尔夫如何激发她…
【Web API系列教程】1.2 — Web API 2中的Action Results
前言 本节的主题是ASP.NET Web API怎样将控制器动作的返回值转换成HTTP的响应消息。 Web API控制器动作能够返回下列的不论什么值： 1。 void 2。 HttpResponseMessage 3， IHttpActionResult 4， Some other type 取决于返回的以上哪一种。…
前端开发常用单词
methods 方法 mounted 创建完成 export 输出 default 默认的 install 安装 components 组件 template 模板 params 参数 route 路线;途径 package 包;盒子;袋 ; toutes 路由器 plugin 插件 local host 本地 require 需要;依赖; storage 储存 prototype 原型 …
原生ajax的post操作
xml.open(方法，路径，是否开启异步)； console.log(e);来找出数据所在位置； 调用 ajax只能传二进制或字符串，需要先把json转一下，JSON.stringify()； 获取到数据时我们要通过JSON.parse()再转成JSO…
jquery后学什么_我在训练营两年后学到了什么
jquery后学什么by Kara Luton卡拉卢顿(Kara Luton) 我在训练营两年后学到了什么 (What I’ve Learned Two Years Post-Bootcamp) It’s been two entire years since I left behind my career of being a music publicist — one I worked towards all of college and miracul…
ExecutorService 的理解与使用
接口 Java.util.concurrent.ExecutorService 表述了异步执行的机制，并且可以让任务在后台执行。壹個 ExecutorService 实例因此特别像壹個线程池。事实上，在 java.util.concurrent 包中的 ExecutorService 的实现就是壹個线程池的实现。 ExecutorService…
前后端交互，网络请求
这边文章主要根据我自己的前端开发工作经验，东拼西凑出来的一点理解，希望能够对大家有点帮助，如果有误导或者错误的地方还请帮助指正，感谢！！！ 前后端交互我理解主要分为三个主要的部分…
HDU 1877 另一个版本 A+B
另一个版本 AB Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 12894 Accepted Submission(s): 4901Problem Description输入两个不超过整型定义的非负10进制整数A和B(<231-1)。输出AB的m (1 < m <10…
gatsby_如何使用Gatsby.js来获取内容
gatsbyby Dimitri Ivashchuk由Dimitri Ivashchuk 如何使用Gatsby.js来获取内容 (How to source content with Gatsby.js) Gatsby.js is a powerful static site generator (with dynamic capabilities) which can be used to build super performant web-sites. It has a very…
使用 AFNetworking 进行 XML 和 JSON 数据请求
（1）XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSerializer，另外结合第三方框架 XMLDictionary 进行数据转换 使用 XMLDictionary 的好处：有效避免自行实现 NSXMLParserDelegate 委托代理…
批处理+定时任务实现定时休息提醒
前言：俗话说的好，懒是第一生产力，懒是提高生产效率的必要条件。而现今windows是大部分人的第一生产工具，批处理定时任务这对黄金搭档就是提升生产效率的第一工具。大家在生产过程中经常会遇到各种周期性的重复的工作，比…
后端返回的数据中换行符 html换行
标签代码 <span v-html"model3_txt"></span> vue js代码 var txt "恭喜你\n获得某某某奖品"; if(txt.indexOf(\n)!-1){var reg new RegExp("/r/n", "g");txttxt.replace(reg, "<br/>");console.log(t…
vim block vim_如何不再害怕Vim
vim block vim精选最流行的命令以及如何使用它们 (A curation of the most popular commands and how to use them) If you’ve ever used Vim, you know how difficult it can get to reach the same speed as in a “normal” GUI editor. But once you do, the payoff is ex…
android EditText 限定中文个数与英文个数的解决方式
EditText 限定中文8个英文16个的解决方法。 在EditText上控件提供的属性中有限定最大最小长度的方法。可是，对于输入时，限定中文8个英文16个时，怎么办？相当于一个中文的长度是两个英文的长度。原理就不说了。自己看一下android的源…
根据二叉树的前序遍历和中序遍历重建二叉树
题目描述 输入某二叉树的前序遍历和中序遍历的结果，请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2,1,5,3,8,6}，则重建二叉树并返回。1 /**2 * Definition for …
VUE 监听当前路由 侦听器 watch
侦听器： 你可以利用侦听器，响应数据的变化，例如路由，和页面中data的值，可以在他们变化的时候写相应的处理逻辑在侦听器中。 侦听器的使用很简单： watch 对象就是侦听器，只有当侦听的值改变了它…
如何使用Bootstrap4和ES6创建自定义确认框
by Prashant Yadav通过Prashant Yadav 如何使用Bootstrap4和ES6创建自定义确认框 (How to create a custom confirm box with Bootstrap4 and ES6) We put lots of sweat into achieving a good design, but imagine a scenario where we have to use something which is styl…
RequireJS学习笔记（转）
前言进入移动前端是很不错的选择，这块也是我希望的道路，但是不熟悉啊。。。现在项目用的是requirebackbone，整个框架被封装了一次，今天看了代码搞不清楚，觉得应该先从源头抓起，所以再看看require了。上午是…
火狐中的table
在火狐浏览器中，table的th、td会存在小数转载于:https://www.cnblogs.com/likwin/p/7270817.html
React路由 react-router-dom
React的路由： 首先我们创建一个React应用 npm install -g create-react-app create-react-app demo-app cd demo-app安装路由 npm install react-router-dom npm add babel/runtime 接下来，将以下任一示例复制/粘贴到中src/App.js。 第一个示例&…
编程基础 垃圾回收_为什么我回收编程问题
编程基础 垃圾回收by Amy M Haddad通过艾米M哈达德(Amy M Haddad) 为什么我回收编程问题 (Why I Recycle Programming Problems) Many programmers are given the same advice: solve as many problems as possible. It’s true that solving new problems can help you gain …
SQL Server孤立账户解决办法
选择你想要的数据库。 执行 exec sp_change_users_login UPDATE_ONE,用户名,登录名 假如你的登录名是：sd exec sp_change_users_login UPDATE_ONE,sd,sd 转载于:https://www.cnblogs.com/runliuv/p/7273675.html
vue更新data无效，页面data没刷新 vue.set
Vue中组件的data是有很多坑的，先普及一下常识： 1.想使用data，必须先在data中创建。（如果不创建就会报错）示例： <div class"">{{user.Age}}</div>new Vue({el: #app,data: {user:{A…
重温Thinking in java
1、高精度 BigInteger、BigDecimal 支持任意大小的数字 不能使用运算符 运算速度相对于int、float稍慢 2、对象作用域 {String s new String("aaa"); } 在}外 此时栈中的引用s已经超出了自己的作用域 便不存在了 但是new String("aaa")这个堆中的对象仍然…
2018 react 大会_React Conf 2018的经验教训
2018 react 大会by Yangshun Tay阳顺泰 React Conf 2018的经验教训 (Lessons Learned at React Conf 2018) I was fortunate to have attended React Conf 2018 thanks to my managers — it was an awesome event. I have been watching past React Conf videos online and i…
删除url中某个参数
这里的url 是指一个网站链接 例如： https://baidu.com?a1&b2 下面看一下封装的代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><script src"https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js&q…