這篇文章給大家分享的是有關(guān)vue2如何解決pc端短信驗(yàn)證碼的問(wèn)題的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、伊美ssl等。為上1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的伊美網(wǎng)站制作公司

<提示語(yǔ)部分不要在意（非重點(diǎn)部分）>

簡(jiǎn)單說(shuō)下布局(采用的是 vue的element ui的ui框架 )進(jìn)行布局操作的

子組件模板部分如下（code部分是很基礎(chǔ)的）

子組件邏輯部分如下（code部分是很基礎(chǔ)的）

在@/utils/validate.js中的使用正則代碼

// 驗(yàn)證手機(jī)號(hào)碼
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}$/
//驗(yàn)證密碼
export const validatePassword = /^(?=.*\d)(?=.*[a-zA-Z]).{5,20}$/

子組件邏輯部分如下（code部分是很基礎(chǔ)的）

 .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%;
   }
  }
 }

父組件中的模板部分

為什么需要使用set這個(gè)api方法呢

如下截圖

可以學(xué)習(xí)下這個(gè)鏈接的使用set的例子

全局變量globals.js文件

[vue-set]的文檔( cn.vuejs.org/v2/api/#Vue… )

說(shuō)明（*****向響應(yīng)式對(duì)象中添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。）

export default {
 //判斷是否點(diǎn)擊了
 isChick(data,key='disabled',count=0){
  data[key] =true
  if(count<=0){
   data[key] =false
  }
 },
 //此處是重點(diǎn) 使用的vue官網(wǎng)給的api方法
 [vue-set](https://cn.vuejs.org/v2/api/#Vue-set)
 sendCode(self,name,k,v){
  self.$set(name,k,v)
 }
}

父組件中的邏輯部分

感謝各位的閱讀！關(guān)于“vue2如何解決pc端短信驗(yàn)證碼的問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！