短信验证码

获取短信验证码功能，可配置是否需要刷新页面时是否可重新获取验证码等配置

示例如下

旧手机号码

用户密码

新手机号码

短信验证码

messageCodeKey 配置此项尤为关键，是辨别各个不同地方使用短信验证码的唯一标识

<template>
  <div class="vue-message-code">
    <el-form ref="editForm" :model="editForm" :rules="editFormRule" label-width="100px" size="small">
      <el-form-item label="旧手机号码" prop="oldphone">
        <el-input v-model="editForm.oldphone" disabled placeholder="请输入旧手机号码" />
      </el-form-item>
      <el-form-item label="用户密码" prop="passwd">
        <el-input v-model="editForm.passwd" type="password" clearable placeholder="请输入用户密码" />
      </el-form-item>
      <el-form-item label="新手机号码" prop="phone">
        <el-input v-model="editForm.phone" clearable placeholder="请输入新手机号码" />
      </el-form-item>
      <el-form-item label="短信验证码" prop="smscode">
        <vue-message-code class="get-code" :getCodeApi="getCodeApi" :validateForm="validateForm"></vue-message-code>
        <el-input v-model="editForm.smscode" placeholder="请输入短信验证码" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "npm-vue-message-code",
  data() {
    return {
      vueMessageCode: null,
      editForm: {
        oldphone: "79513145201", //旧手机号码
        passwd: "", //密码
        phone: "", //手机号码
        smscode: "" //短信验证码
      }, //编辑表单
      editFormRule: {
        passwd: [{ required: true, message: "请输入用户密码", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { pattern: /1\d{10}$/, message: "请输入正确的手机号", trigger: "blur" }
        ], //手机号码
        smscode: [{ required: true, message: "请输入短信验证码", trigger: "blur" }] //短信验证码
      },
    }
  },
  mounted() {
    import("vue-message-code").then(item => {
      this.vueMessageCode = item.vueMessageCode
    })
  },
  methods: {
    //获取短信验证码
    getCodeApi() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, 1000);
      })
    },
    //校验手机号
    validateForm() {
      return new Promise(resolve => {
        this.$refs.editForm.validateField("phone", data => {
          if (!data) {
            resolve({ result: true, msg: "校验通过" })
          } else {
            resolve({ result: false, msg: data })
          }
        })
      })
    },
  }
}
</script>

<style lang="less" scoped>
.vue-message-code {
  width: 80%;
  margin: 0 auto;
  .el-form-item {
    padding: 0 32px;
    .el-form-item__label {
      line-height: 40px;
    }
    .el-form-item__content {
      position: relative;
      .el-input {
        height: 40px;
        line-height: 40px;
        .el-input__inner {
          height: 100%;
          width: 100%;
        }
      }
      .get-code {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 16px;
        color: #409eff;
        line-height: 40px;
        cursor: pointer;
        z-index: 9;
        background: transparent;
        border: none;
        height: 40px;
        text-align: right;
        min-width: unset;
        & + .el-input {
          .el-input__inner {
            padding-right: 178px;
          }
          .el-input__suffix {
            right: 148px;
            line-height: 48px;
          }
        }
      }
    }
  }
}
</style>

显示代码

安装

npm install -S vue-message-code

引入

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

或者

const vueMessageCode = require("vue-message-code")
Vue.use(vueMessageCode)

使用

短信验证码

<vue-message-code class="get-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	?S后重发

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

阅读原文 (opens new window)