vue ElementUI的from表單實現(xiàn)登錄效果的示例

更新時間：2021年09月26日 09:58:01 作者：奇奇怪怪~

本文主要介紹了vue ElementUI的from表單實現(xiàn)登錄效果的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

1.通過ElementUI構建基本的樣式

不了解ElementUI官方網(wǎng)站 https://element.eleme.cn/#/zh-CN 對 ElementUI 進行基本的了解.

1.1 ElementUI的使用首先在項目中通過指令 npm i element-ui S 安裝ElementUI

1.2 然后在官網(wǎng)中找到 from表單然后就可以基本的布局了

那么下面是我已經(jīng)寫好的框架

<el-form
      label-position="top"
      label-width="100px" class="demo-ruleForm"
      :rules='rules'
      :model='rulesForm'
      status-icon
      ref='ruleForm'
    >
        <el-form-item label="用戶名" prop="name">
            <el-input type="text" v-model="rulesForm.name"></el-input>
        </el-form-item>
 
        <el-form-item label="密碼" prop="password">
            <el-input type="password"  v-model="rulesForm.password"></el-input>
        </el-form-item>
 
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button>重置</el-button>
        </el-form-item>
    </el-form>

這些代碼對應的效果

其中有用到一些 ElementUI 一些屬性此處小編就不解釋了官網(wǎng)上都有那么我就放一些截圖方便大家查看這些屬性

然后其中 rules和model 配合使用做一些input框輸入規(guī)則

然后這兩個規(guī)則綁定給賬號密碼框

ElementUI 布局就這么點操作

2.用點擊提交按鈕將將賬號密碼框內(nèi)的內(nèi)容傳給后臺數(shù)據(jù)

我們通過 ref 可以更好的拿到標簽內(nèi)的屬性

下面是將輸入框內(nèi)的內(nèi)容傳給后臺的方法

methods: {
    submitForm(fromName){
      this.$refs[fromName].validate((valid)=>{
          if(valid){
            //如果校檢通過，在這里向后端發(fā)送用戶名和密碼
            login({
              name:this.rulesForm.name,
              password:this.rulesForm.password
            }).then((data)=>{
              if(data.code==0){
                localStorage.setItem('token',data.data.token)
                window.location.href='/'
              }
              if(data.code==1){
                this.$message.error(data.mes)
              }
            })
          }else{
            console.log('error submit!!')
            return false
          }
      })
    }
  }

其中有一個 login 是我們封裝后端的一個接口所得的方法