Vue ElementUI實現退出功能

2022-06-08 16:00:10 字數 2643 閱讀 9181

前面我們已經實現了登入功能,並且能成功登入,那退出功能也是必不可少的。

<

el-dropdown

@command

="handlecommand"

>

<

span

class

="el-dropdown-link"

>

您好

<

i class

="el-icon-arrow-down el-icon--right"

>

i>

span

>

<

el-dropdown-menu

slot

="dropdown"

>

<

el-dropdown-item

icon

="el-icon-edit"

command

="edit"

>>修改密碼

el-dropdown-item

>

<

el-dropdown-item

icon

="el-icon-s-operation"

command

="quit"

>>退出登入

el-dropdown-item

>

el-dropdown-menu

>

el-dropdown

>

當我們點選退出登入的時候,會呼叫  handlecommand 方法,因為修改密碼和退出登入都呼叫了 handlecommand 方法,我們可以做個判斷,根據傳的引數不同進行不同的處理。

首先來進行我們的介面配置

在 src/api/login.js 下面新增退出登入的介面,新增下面的**

// 退出登入

export function logout(token)})

}

<

template

>

<

div

class

="header"

>

<

a href

="#/"

>

<

img

class

="logo"

src="@/assets/logo1.png"

width

="25px"

/>

<

span

class

="company"

>鄒鄒管理系統

span

>

a>

<

el-dropdown

@command

="handlecommand"

>

<

span

class

="el-dropdown-link"

>

您好

<

i class

="el-icon-arrow-down el-icon--right"

>

i>

span

>

<

el-dropdown-menu

slot

="dropdown"

>

<

el-dropdown-item

icon

="el-icon-edit"

command

="edit"

>>修改密碼

el-dropdown-item

>

<

el-dropdown-item

icon

="el-icon-s-operation"

command

="quit"

>>退出登入

el-dropdown-item

>

el-dropdown-menu

>

el-dropdown

>

div>

template

>

<

script

>

import from

'@/api/login'//

匯入退出系統介面

export

default

else

); }

})break

;

default

:

break

; }}},

}script

>

<

style

scoped

>

/*logo

*/.logo

/*文字

*/.company

/*下拉列表

*/.el-dropdown

/*系統管理

*/.el-dropdown-link

style

>

退出登入的邏輯就完成了

vue Element ui 實現分頁

實現分頁功能的關鍵技術點為頁面顯示的結果處理,而此處的關鍵技術點為js的slice 方法。首先介紹slice 方法 slice 方法可從已有的陣列中返回選定的元素。slice 方法可提取字串的某個部分,並以新的字串返回被提取的部分。主要用法 array.slice start,end 引數描述 st...

vue element ui 實現分頁效果

我使用得是el table el pagination來實現的,話不多說,直接上 編輯刪除 export default inject reload 注入reload方法 data created mounted methods handlecurrentchange function curren...

vue Element ui實現分頁效果

當我們向後台請求大量資料的時候,並要在頁面展示出來,請求的資料可能上百條資料或者更多的時候,並不想在乙個頁面展示,這就需要使用分頁功能來去完成了。1.本次所使用的是vue2.0 element ui實現乙個分頁功能,element ui這個元件特別豐富,分頁中給我提供了乙個pagination 分頁...