<提示语部分不要在意（非重点部分）>
简单说下布局(采用的是 的ui框架 )进行布局操作的
子组件模板部分如下（code部分是很基础的）
<template> <div> <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"> <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> <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"> <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中的使用正则代码
// 验证手机号码
export const validatPhone = /^(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/
//验证密码
export const validatePassword = /^(?=.*\d)(?=.*[a-zA-Z]).{5,20}$/
<script> import {validatPhone,validatePassword} from '@/utils/validate' export default { props:{ dialog:{ type:Object, default: {} }, }, name: "Forget", data(){ // 使用正则进行验证手机号码 const validatePhone = (rule, value, callback) => { if (!value) { return callback(new Error('请输入手机号码')); } else { if (!validatPhone.test(value)) { callback(new Error('请输入手机号码')); return } callback(); } }; // 使用进行验证手机验证码 const validateCode = (rule, value, callback) => { if (value === '') { return callback(new Error('请输入验证码')); } else { //真正环境请修改成自己的逻辑即可 if (this.dialog.ruleForm.code !== '123456') { callback(new Error('验证码失误，请重新输入')) // this.dialog.ruleForm.code = '' return } callback(); } }; // 使用正则进行验证密码 const validatenewPwd = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); return } else if (!validatePassword.test(value)) { return callback(new Error('新密码不合法')); } else { callback(); } }; return { rules:{ //验证表单元素中的规则 phone:[ { validator: validatePhone, trigger: ['blur','change'] } ], code:[ { validator: validateCode, trigger: ['blur','change'] } ], newPwd:[ { validator: validatenewPwd, trigger: ['blur','change'] } ], }, timer: null//操作定时器 } }, computed:{ //getDisabled() 当手机号码的长度等于11位和点击验证码状态为false时，则可以进行倒计时操作 getDisabled(){ let phone= this.dialog.ruleForm.phone const isChick = this.dialog.ruleForm.isChick if(phone.toString().length === 11 && isChick ===false){ return false } else { // this.dialog.ruleForm.disabled = true return true } } }, methods:{ // 发送验证码 sendCode(opt){ this.$emit('sendCode',opt) }, // 点击取消按钮时触发 cancel(){ this.$emit('cancel') }, // 点击确定按钮时触发 determine(resf){ this.$refs[resf].validate((valid) => { if (valid) { this.$emit('determine',resf) } else { console.log('error submit!!'); return false; } }); }, } } </script>
子组件逻辑部分如下（code部分是很基础的）
<style scoped lang="scss"> .forget{ /deep/ .el-dialog__wrapper{ .el-dialog{ max-width: 500px; .el-dialog__header{ text-align: center; } } .demo-ruleForm{ .el-form-item__content{ max-width:100% } } .el-dialog__body{ .el-form-item{ text-align: center; } } } .send-code{ display: flex;flex: 1;justify-content: space-evenly; /deep/ .el-input{ margin-right: 12px } /deep/ .el-link{ white-space: nowrap; display: inline-block; line-height: 1; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: .1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; padding: 12px 10px; font-size: 14px; border-radius: 4px; } } .dialog-footer{ display: flex; flex: 1; justify-content: center; /deep/ .el-button{ flex: 0 0 40%; } } } </style>
父组件中的模板部分
<template> <forget :dialog="dialog"@cancel="dialog.visible= false" @determine="determine" @sendCode="sendCode"></forget> </template>
为什么需要使用set这个api方法呢
如下截图
可以学习下这个链接的使用set的例子
全局变量globals.js文件
[vue-set]的文档( cn.vuejs.org/v2/api/#Vue… )
说明（*****向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。）