vue-message-code组件使用

安装

npm install -S vue3-message-code

引入

import "vue3-message-code/lib/style.css"
import { vueMessageCode } from "vue3-message-code"
Vue.use(vueMessageCode)

或者

import "vue3-message-code/lib/style.css"
import vueMessageCode from "vue3-message-code"
Vue.use(vueMessageCode)

使用

短信验证码

<vue-message-code :getCodeApi="getCodeApi" :validateForm="validateForm"></vue-message-code>

    //获取短信验证码
    const getCodeApi = async() => {
      this.getCodeForm.phone = this.editForm.phone
      return new Promise((resolve, reject) => {
        commonApi.req(this.getCodeForm).then(data => {
          resolve(data)
        }).catch(err => {
          reject(err)
        })
      })
    },
    //校验手机号
    const validateForm = async () => {
      return new Promise(resolve => {
        //这边是element的表单校验
        this.$refs.editForm.validateField("phone", data => {
          if (!data) {
            resolve({ result: true, msg: "校验通过" })
          } else {
            resolve({ result: false, msg: data })
          }
        })
      })
    },

配置参数

| 字段 | 说明 | 类型 | 默认值 | | :-------------------------------: | :------------------------------------------------: | :-----: | :-------------: | | getCodeApi | 获取短信验证码接口 | Promise | promise | | validateForm | 校验手机号 | Promise | Promise | | time | 倒计时时间 | Number | 60 | | isReloadReset | 刷新浏览器是否可以立即再次获取验证码 | Boolean | false | | messageCodeKey（0.0.2版本及以上） | 添加验证码组件key，不同key值的组件等待时间互不干涉 | String | messageCodeTime | | storageType（0.0.3版本及以上） | 存入浏览器缓存类型 localStorage sessionStorage | String | localStorage | | beginMsg（0.0.3版本及以上） | 点击获取短信验证码前 的按钮文字 | String | 获取短信验证码 | | countDownMsg（0.0.3版本及以上） | 点击后文字提示 ?会被替代为倒计时时间 | String | ? 秒后可重发 |

微信公众号 爆米花小布 了解更多前端经验

更新日志

0.0.5 【优化】修复引用文件错误问题，同步vue-message-code 版本号