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

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

<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>