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

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

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

1.通過(guò)ElementUI構(gòu)建基本的樣式

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

1.1 ElementUI的使用首先在項(xiàng)目中通過(guò)指令 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>

這些代碼對(duì)應(yīng)的效果

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

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

然后這兩個(gè)規(guī)則綁定給賬號(hào)密碼框

ElementUI 布局就這么點(diǎn)操作

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

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

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

methods: {
    submitForm(fromName){
      this.$refs[fromName].validate((valid)=>{
          if(valid){
            //如果校檢通過(guò)，在這里向后端發(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
          }
      })
    }
  }

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

這個(gè)方法綁定給提交按鈕

然后我們輸入已有的賬號(hào)密碼點(diǎn)擊提交按鈕就可以登錄了

然后就是我們渲染登錄的一些信息了

總結(jié)

一個(gè)登錄效果的實(shí)現(xiàn)就兩步：先用ElementUI構(gòu)建對(duì)應(yīng)的樣式---》用點(diǎn)擊提交按鈕將將賬號(hào)密碼框內(nèi)的內(nèi)容傳給后臺(tái)數(shù)據(jù)

到此這篇關(guān)于vue ElementUI的from表單實(shí)現(xiàn)登錄效果的示例的文章就介紹到這了,更多相關(guān)vue Element from表單登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: