vue-message-code v0.0.5

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 })
          }
        })
      })
    },

配置参数

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

更新日志

0.0.5 【优化】使用import导入， 新增默认样式