Vant 使用之Toast Vant安装和使用

Vant 是一个VUE 的移动端组件库，里面有很多好用的组件。

第一步，安装和配置 Vant

npm i vant -S

npm 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);

最后在页面组件里面使用它，下面贴上页面组件的完整代码