The introduction
Yesterday, when I was doing the project, I met a small problem (big god or big guy). I can skip this point, and it is a small benefit for friends who just start or want to learn vUE.
The image is as follows
Don’t pay attention to the hints.
A quick word about the layout (usingVue’s Element UI UI framework) for the layout operation
The child component template section is as follows (the Code section is very basic)
<template>
<div class="forget">
<el-dialog title="Change new password" :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="Cell phone number" 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="Mobile captcha"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="New password" 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"> delete </el-button> <el-buttontype="primary" @click="determine(dialog.ruleForms)"
:loading="dialog.ruleForm.loading"
>{{dialog.ruleForm.loadingText}}</el-button>
</div>
</el-dialog>
</div>
</template>
Copy the code
The subcomponent logic is as follows (the code part is very basic)
Use regular code in @/utils/ validation.js
// Verify the phone numberexportConst validatPhone = / ^ ^ (([0, +] \ d {2, 3} -)? (0 \ d {2, 3}) -) (\ d {7, 8}) (- (\ d {3}))? $) | ([0-9] | 13 14 15 [012356789] [5-9] | | 166 | 17 [0 to 8] [0-9] | | 18 19 [8-9]) [0-9] {8} $/ / / verify passwordexportconst validatePassword = /^(? =.*\d)(? =. * [a zA - Z]) {5, 20} $/Copy the code
<script>
import {validatPhone,validatePassword} from '@/utils/validate'
export default {
props:{
dialog:{
type:Object,
default: {}
},
},
name: "Forget".dataConst validatePhone = (rule, value, callback) => {if(! value) {return callback(new Error('Please enter your mobile number'));
}
else {
if(! validatPhone.test(value)) { callback(new Error('Please enter your mobile number'));
return} callback(); }}; Const validateCode = (rule, value, callback) => {if (value === ' ') {
return callback(new Error('Please enter verification code'));
} else{// modify the real environment to its own logicif(this.dialog.ruleForm.code ! = ='123456') {
callback(new Error('Captcha error, please re-enter'))
// this.dialog.ruleForm.code = ' '
return} callback(); }}; Const validatenewPwd = (rule, value, callback) => {if (value === ' ') {
callback(new Error('Please enter your password'));
return
} else if(! validatePassword.test(value)) {return callback(new Error('New password is invalid'));
} else{ callback(); }};return{rules:{// validator: validatePhone, trigger: ['blur'.'change'] }
],
code:[
{ validator: validateCode, trigger: ['blur'.'change'] }
],
newPwd:[
{ validator: validatenewPwd, trigger: ['blur'.'change']}],}, timer: null// Operation timer}}, computed:{//getDisabled() When the length of the mobile phone number is 11 digits and the status of the click verification code isfalse, the countdown operation can be performedgetDisabled() {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)}, // triggered when the cancel button is clickedcancel(){
this.$emit('cancel'}, // Determine (resf){this.$refs[resf].validate((valid) => {
if (valid) {
this.$emit('determine',resf)
} else {
console.log('error submit!! ');
return false; }}); }, } } </script>Copy the code
The subcomponent logic is as follows (the code part is very basic)
<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>
Copy the code
The template part in the parent component
<template>
<forget :dialog="dialog"@cancel="dialog.visible= false" @determine="determine" @sendCode="sendCode"></forget>
</template>
Copy the code
Why do I need to use the SET API method
The following screenshots
You can learn about this linkExample of using set
Globals.js file
[vue-set] documentation (Cn.vuejs.org/v2/api/#Vue…)
Note (***** adds a property to the responsive object and ensures that the new property is also responsive and triggers view updates.)
exportDefault {// Check whether isChick(data,key=) is clicked'disabled',count=0){
data[key] =true
if(count<=0){
data[key] =false}}, / / here is the key to use vue website to the API methods [vue - set] (HTTP: / / https://cn.vuejs.org/v2/api/#Vue-set)
sendCode(self,name,k,v){
self.$set(name,k,v)
}
}
Copy the code
The logical part of the parent component
<script>
export default {
data() {
return{// display the object variable for the child component to change the password dialog: {visible:false, // whether to display ruleForms:'ruleForms'RuleForm: {// The part of the form that needs to be acted on phone:' ',
newPwd: ' ',
code: ' ',
sendCode: 'Send verification code',
disabled: false,
isChick:false,
loading: false,
loadingText: 'determine'},}, methods:{// sendCode60s(self,opt){let count=self.timeCount;
const ruleForm = self[opt.dialog][opt.ruleForm]
self.timer = setInterval(()=>{// The button is self.$globals.isChick(ruleForm,'disabled',count)
letcode = count<10? ` 0${count}After s, resend ':'${count}S and resend 'self.$globals.sendCode(self,ruleForm,opt.sendCode,code)
self.$globals.isChick(ruleForm,'isChick',count)
if(count<=0){
ruleForm.disabled = false
self.$globals.isChick(ruleForm,'disabled')
code = 'Send verification code'
clearInterval(self.timer)
count =self.timeCount
self.$globals.sendCode(self,ruleForm,opt.sendCode,code)
self.$globals.isChick(ruleForm,'isChick')} count --},1000)}, sendCode sendCode(opt){const phone = opt.phone // Check whether the first digit of the mobile phone number starts with digit 1if(phone. Slice (0, 1)! = ='1'){
this.$message({
showClose: true,
message: 'Please enter the correct mobile number'.type: 'error'
});
return
}
this.$confirm(`${phone}Send SMS verification code? `,'tip', {
confirmButtonText: 'sure',
cancelButtonText: 'cancel'.type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: 'Sending SMS verification code successfully! '
});
const opt ={
dialog: 'dialog',
ruleForm: 'ruleForm',
sendCode:'sendCode'
}
this.sendCode60s(this,opt)
}).catch(() => {
this.$message({
type: 'info',
message: 'Failed to send SMS verification code'}); }); }, // The new password determines (formName){console.log(formName) // this.$refs[formName].validate((valid) => {
// if (valid) {
// this.dialog.ruleForm.loading = true
// this.dialog.ruleForm.loadingText ='Sending... '
// } else {
// return false;
// }
// });
},
}
}
</script>
Copy the code