vue-message-code

vue-message-code组件使用

安装

npm install -S vue-message-code

引入

import { vueMessageCode } from "vue-message-code"
Vue.use(vueMessageCode)

或者

import vueMessageCode from "vue-message-code"
Vue.use(vueMessageCode)

使用

短信验证码

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

    //获取短信验证码
    getCodeApi() {
      this.getCodeForm.phone = this.editForm.phone
      return new Promise((resolve, reject) => {
        commonApi.req(this.getCodeForm).then(data => {
          resolve(data)
        }).catch(err => {
          reject(err)
        })
      })
    },
    //校验手机号
    validateForm() {
      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 【优化】使用import导入， 新增默认样式