vue2之简易的之简易的pc端短信验证码的问题及处理方法端短信验证码的问题及处理方法
<提示语部分不要在意(非重点部分)>
简单说下布局(采用的是 vue的element ui的ui框架 )进行布局操作的
子组件模板部分如下(code部分是很基础的)
<template>
<div class="forget">
<el-dialog title="修改新密码" :visible.sync="dialog.visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-form :model="dialog.ruleForm" status-icon :rules="rules" :ref="dialog.ruleForms"
label-width="100px" class="demo-ruleForm">
<el-form-item label="手机号码" prop="phone" required>
<el-input type="text" v-model.number="dialog.ruleForm.phone" autocomplete="off"
:clearable="true"
></el-input>
</el-form-item>
<el-form-item label="手机验证码"prop="code" required>
<div class="send-code">
<el-input type="text" v-model="dialog.ruleForm.code" autocomplete="off"
maxlength="6"
show-word-limit
:clearable="true"
></el-input>
<el-link
:style="{color:dialog.ruleForm.phone.toString().length===11?'#222':'#999'}"
type="info" :underline="false"
:disabled="getDisabled"
@click="sendCode({
phone:dialog.ruleForm.phone,sendCode:dialog.ruleForm.sendCode
})"
>{{dialog.ruleForm.sendCode}}</el-link>
</div>
</el-form-item>
<el-form-item label="新密码" prop="newPwd" required>
<el-input :clearable="true" type="password" v-model="dialog.ruleForm.newPwd"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="determine(dialog.ruleForms)"
:loading="dialog.ruleForm.loading"
>{{dialog.ruleForm.loadingText}}</el-button>
</div>
</el-dialog>
</div>
</template>
子组件逻辑部分如下(code部分是很基础的)
在@/utils/validate.js中的使用正则代码