vue ElementUI的from表單實現(xiàn)登錄效果的示例
1.通過ElementUI構(gòu)建基本的樣式
不了解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 是 我們封裝后端 的一個接口所得的方法
這個方法綁定給提交按鈕
然后我們輸入已有的賬號密碼 點擊提交按鈕 就可以登錄了
然后 就是我們渲染 登錄的 一些信息了
總結(jié)
一個登錄效果的實現(xiàn)就兩步:先用ElementUI構(gòu)建對應的樣式---》用點擊提交按鈕將 將賬號密碼框內(nèi)的內(nèi)容 傳給后臺數(shù)據(jù)
到此這篇關(guān)于vue ElementUI的from表單實現(xiàn)登錄效果的示例的文章就介紹到這了,更多相關(guān)vue Element from表單登錄 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 實現(xiàn)左右拖拽元素并且不超過他的父元素的寬度
這篇文章主要介紹了vue 實現(xiàn)左右拖拽元素并且不超過他的父元素的寬度,需要的朋友可以參考下2018-11-11vue el-form一行里面放置多個el-form-item的實現(xiàn)
本文主要介紹了vue el-form一行里面放置多個el-form-item的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-08-08vue中動態(tài)出來返回的時間秒數(shù)(在多少秒顯示分、小時等等)
這篇文章主要給大家介紹了關(guān)于vue中動態(tài)出來返回的時間秒數(shù)(在多少秒顯示分、小時等等)的相關(guān)資料,文中通過代碼示例介紹的非常詳細,對大家學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01vue控制臺警告Runtime directive used on compon
這篇文章主要為大家介紹了vue控制臺警告Runtime directive used on component with non-element root node解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled(實例代碼)
本文通過實例代碼給大家分享了vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled效果,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2019-11-11