element ui 退出功能
<template> <el-container class="home-wrapper">
<el-header>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="4">Smile</el-col>
<el-col :span="4" class="header-font">后台系统管理</el-col>
<el-col :span="1" class="header-logout"><a href="#" @click.prevent="logout" >退出</a></el-col>
</el-row>
</el-header>
<el-container>
<el-aside width="15%">Aside</el-aside>
<el-main >Main</el-main>
</el-container>
</el-container> </template>> <script>
import { constants } from 'crypto';
export default {
data(){
return{ }
},
methods:{
logout(){//退出功能
//弹出确认对话框
//用户点击确认,跳回用户登录页面,清除token
this.$confirm('确定要退出登录吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '退出成功!'
});
//确认退出,清除token
localStorage.removeItem('token')
//跳转登录页面(编程式导航)
this.$router.push('/login') }).catch(() => {
this.$message({
type: 'info',
message: '已取消退出'
});
}); }
}
}
</script>> <style scoped lang='less'> .home-wrapper {
min-width: 720px;
height: 100%; .el-header{
background-color:#222d32;
color: #fff;
text-align: center;
line-height: 60px;
padding: 0;
}
.header-font{
color: #fff;
font-size: 20px;
} .header-logout a{
font-size:14px;
color: #fff;
}
a{
text-decoration: none;
} .el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
} .el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
} .el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
} .el-container:nth-child(7) .el-aside {
line-height: 320px;
} } </style>>
element ui 退出功能的更多相关文章
- Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库
使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...
- Vue + Element UI 实现权限管理系统(第三方图标库)
使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...
- [转]vue Element UI走马灯组件重写
https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...
- Element UI 框架搭建
Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=ht ...
- vue+element ui项目总结点(二)table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1
1.oninput 事件在用户输入时触发; <template> <div class="test_box"> <p>hell,你好</p ...
- Element UI tree 回显问题
Part.1 问题 写项目时遇到一个棘手的问题,在做关于权限功能时,点击修改需要显示角色原本对应的权限.涉及到了 tree 组件回显,但是有一个很尴尬的问题:tree 组件只要父节点选中,那么子节点就 ...
- QtQuick桌面应用开发指导 1)关于教程 2)原型和设计 3)实现UI和功能_A
Release1.0 http://qt-project.org/wiki/developer-guides Qt Quick Application Developer Guide for Desk ...
随机推荐
- find文件删除
find /root/title/test -type f -name '*.txt' -exec rm {} \; 查找并删除test文件夹下所有txt文件 find /root/title/t ...
- Notepad++提升工作效率小技巧
前言 简单的提升工具效率需求可以借助Notepad编辑器实现.以前也用Python/Shell开发过本文中提到的需求,现在发现其实没有必要.本文介绍一些工作中常见的可以通过"Notepad+ ...
- Spring Cloud Alibaba | Nacos服务注册与发现
目录 Spring Cloud Alibaba | Nacos服务注册与发现 1. 服务提供者 1.1 pom.xml项目依赖 1.2 配置文件application.yml 1.3 启动类Produ ...
- python笔记(2)--字符串
一.字符串 字符串是不可变序列,具有序列的公共操作方法,具体操作见python笔记(1)--序列(列表 元组 range) 1.创建字符串 单引号:'Hello , I am Logan ! ' 双引 ...
- Spring Cloud Alibaba | Sentinel: 服务限流基础篇
目录 Spring Cloud Alibaba | Sentinel: 服务限流基础篇 1. 简介 2. 定义资源 2.1 主流框架的默认适配 2.2 抛出异常的方式定义资源 2.3 返回布尔值方式定 ...
- Dapper学习笔记
听说有个轻量化的orm Dapper,我就去了解下.试着对Sql Server和Mysql进行增删改查,体验不错.它不如EF臃肿,也比一般的封装灵活,比如我们封装了一个映射类.利用反射,在Execut ...
- HttpClient多文件上传代码及普通参数中文乱码问题解决
该随笔记录了在实际项目中使用HttpClient调用外部api,需上传文件和普通参数的代码. 笔者在使用 HttpClient 调用 http api 接口时,需要服务端上传文件和一些普通参数给 ht ...
- MediatR-进程内的消息通信框架
MediatR是一款进程内的消息订阅.发布框架,提供了Send方法用于发布到单个处理程序.Publish方法发布到多个处理程序,使用起来非常方便.目前支持 .NET Framework4.5..NET ...
- 万能RecyclerView的数据适配器BaseRecyclerViewAdapterHelper
今天楼主才发现github上有这么一个好用的开源代码,充满好奇心的楼主马上使用了,特地分享给大家. 此项目的github地址: https://github.com/CymChad/BaseRecyc ...
- webService 的使用
webService Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些 ...