Vue.js實現(xiàn)可配置的登錄表單代碼詳解

更新時間：2018年03月29日 08:34:37 作者：廖柯宇

這篇文章主要介紹了Vue.js實現(xiàn)可配置的登錄表單實例代碼詳解，文中給大家補充介紹了vue.js 全選與取消全選的實例代碼,需要的朋友可以參考下

表單是后臺項目業(yè)務中的常用組件，這次重構了登錄功能以滿足登錄方式可配置的需求，在此記錄和分享一下。

業(yè)務場景

在之前，項目只支持手機號+密碼登錄，前端是直接把表單寫死的，后來有客戶希望能支持驗證碼登錄，有的客戶還希望能有手機號+驗證碼+密碼的登錄方式…所以登錄方式的靈活性需要可配置的表單支持，于是我把登錄組件做了拆分。

以表單元素為粒度，分離出了手機號、密碼、短信驗證碼這幾個組件，它們內(nèi)部都有自己的表單驗證方法，通過組合可以快速完成登錄、注冊、找回密碼等表單組件。高內(nèi)聚低耦合、高內(nèi)聚低耦合…跟著念十遍~

.
├ common
├ captcha.vue
|  ├ password.vue
|  └ phone.vue
├ login
|  └ index.vue
├ register
|  └ index.vue
└ resetPassword
  └ index.vue

這里我們將login作為父組件，讀取服務端返回的登錄配置并在模板做條件渲染，登錄時調(diào)用子組件內(nèi)部的表單驗證，最后通過Vuex拿到數(shù)據(jù)調(diào)用接口。整個可配置登錄表單的邏輯就是醬子，接下來上代碼。

代碼

請求服務端配置數(shù)據(jù)：

/* 參數(shù)說明：
 * 'password': 密碼登錄 
 * 'captcha': 短信驗證碼登錄
 * 'password_or_captcha': 密碼或短信登錄 
 * 'password_with_captcha': 密碼+短信登錄
 */
config: {
 login_methods: 'password'
}

登錄組件的核心渲染代碼（pug）：

.login-card
 .login-header
   h3 登錄

 .login-content
  phone(ref="phone")
  password(
   v-if="isPasswordMode"
   ref="password"
  )
  captcha(
   v-if="isCaptchaMode"
   ref="captcha"
  )  
  template(v-if="isPasswordWithCaptchaMode")
   captcha(ref="captcha")
   password(ref="password")
  
  template(v-if="isPasswordOrCaptchaMode")
   ...
  el-button(@click="login") 登錄

登錄時需要三個步驟：表單驗證、組裝數(shù)據(jù)、調(diào)用接口：

async login () {
 if (!this.validate()) return
 const loginData = this.getLoginData()
 await this.postLogin(loginData)
 ...
}

登錄的表單驗證其實是對當前登錄方式中所有組件的 validate() 方法進行邏輯判斷：

validate () {
 const phone = this.$refs.phone.validate()
 let isPass = false
  
 if (this.isPasswordMode) {
  if (this.$refs.password) isPass = this.$refs.password.validate()
 }
  
 if (this.isCaptchaMode) {
  if (this.$refs.captcha) isPass = this.$refs.captcha.validate()
 }
  
 if (this.isPasswordWithCaptchaMode) ...
  
 if (this.isPasswordOrCaptchaMode) ...
  
 isPass = phone && isPass
 return isPass
}

每個子組件都是一個完整的表單，驗證也由自己完成，password組件模板：

.login-password
 el-form(
  :model="form"
  :rules="rules"
  ref="form"
  @submit.native.prevent=""
 )
  el-form-item(prop="password")
   el-input(
    v-model="form.password"
    type="password"
    name="password"
   )

W3C: When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

需要注意，根據(jù) W3C標準，當一個form元素中只有一個輸入框時，在該輸入框中按下回車會自動提交表單。通過在 <el-form> 添加 @submit.native.prevent 可以阻止這一默認行為。

password組件的表單驗證：

validate () {
 let res = false
 this.$refs.form.validate((valid) => {
  res = valid
 })
 return res
}

最后從Vuex里拿到所有表單數(shù)據(jù)，進行組裝：

computed: {
 ...mapState('login', {
  phone: state => state.phone,
  password: state => state.password,
  captcha: state => state.captcha
 }), 
},
methods: {
 ... 
 getLoginData () {
  let mode = ''
  const phone = this.phone
  ...
  const data = { phone }
  
  if (this.isPasswordMode) {
   mode = 'password'
   data.password = password
  }
  if (this.isCaptchaMode) {
   mode = 'captcha'
   data.captcha = captcha
  } 
  if (this.isPasswordWithCaptchaMode) ...  
  if (this.isPasswordOrCaptchaMode) ...  
  data.mode = mode
  return data
 }
}

補充：

vue.js 全選與取消全選的實例代碼

new Vue({
  el: '#app',
  data: {
    checked: false,
    checkedNames: [],
    checkedArr: ["Runoob", "Taobao", "Google"]
  },
  methods: {
    changeAllChecked: function() {
      if (this.checked) {
        this.checkedNames = this.checkedArr
      } else {
        this.checkedNames = []
      }
    }
  },
  watch: {
    "checkedNames": function() {
      if (this.checkedNames.length == this.checkedArr.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    }
  }
})

您可能感興趣的文章: