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 是 我們封裝后端 的一個接口所得的方法
這個方法綁定給提交按鈕
然后我們輸入已有的賬號密碼 點擊提交按鈕 就可以登錄了
然后 就是我們渲染 登錄的 一些信息了
總結
一個登錄效果的實現(xiàn)就兩步：先用ElementUI構建對應的樣式---》用點擊提交按鈕將 將賬號密碼框內(nèi)的內(nèi)容 傳給后臺數(shù)據(jù)
到此這篇關于vue ElementUI的from表單實現(xiàn)登錄效果的示例的文章就介紹到這了,更多相關vue Element from表單登錄 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于vue打開新窗口并實現(xiàn)傳參的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要介紹了vue如何轉換時間格式為年月日時分秒和年月日(補零),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
最近遇到這樣的需求輸入連號事件,需要在表格中輸入物流單號,物流號碼,生成的數(shù)量,名稱,點擊確定自動生成固定數(shù)量的連號物流單號,本文重點介紹vue3輸入單號和張數(shù),自動生成連號的單號,感興趣的朋友一起看看吧2024-02-02
解決vue項目中出現(xiàn)Invalid Host header的問題
這篇文章主要介紹了解決vue項目中出現(xiàn)"Invalid Host header"的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
關于在vscode使用webpack指令顯示"因為在此系統(tǒng)中禁止運行腳本"問題(完美解決)
這篇文章主要介紹了解決在vscode使用webpack指令顯示"因為在此系統(tǒng)中禁止運行腳本"問題,本文給大家分享完美解決方法，需要的朋友可以參考下2021-07-07
本文主要介紹了vue數(shù)據(jù)綁定的相關知識，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細介紹了基于Vuejs實現(xiàn)購物車功能的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
如何使用VUE+faceApi.js實現(xiàn)攝像頭拍攝人臉識別
Face-api.js是一個JavaScript API,是基于tensorflow.js核心API 的人臉檢測和人臉識別的瀏覽器實現(xiàn),這篇文章主要給大家介紹了關于如何使用VUE+faceApi.js實現(xiàn)攝像頭拍攝人臉識別的相關資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了詳解在vue-test-utils中mock全局對象，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue2.7是Vue2.x的最終次要版本,下面這篇文章主要給大家介紹了關于vue3.x項目降級到vue2.7的解決方案,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03