<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 退出功能的更多相关文章

  1. Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

  2. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  3. Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库

    使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...

  4. Vue + Element UI 实现权限管理系统(第三方图标库)

    使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...

  5. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

  6. Element UI 框架搭建

    Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=ht ...

  7. vue+element ui项目总结点(二)table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1

    1.oninput 事件在用户输入时触发; <template> <div class="test_box"> <p>hell,你好</p ...

  8. Element UI tree 回显问题

    Part.1 问题 写项目时遇到一个棘手的问题,在做关于权限功能时,点击修改需要显示角色原本对应的权限.涉及到了 tree 组件回显,但是有一个很尴尬的问题:tree 组件只要父节点选中,那么子节点就 ...

  9. QtQuick桌面应用开发指导 1)关于教程 2)原型和设计 3)实现UI和功能_A

    Release1.0 http://qt-project.org/wiki/developer-guides Qt Quick Application Developer Guide for Desk ...

随机推荐

  1. find文件删除

    find /root/title/test -type f -name '*.txt' -exec rm {} \;   查找并删除test文件夹下所有txt文件 find /root/title/t ...

  2. Notepad++提升工作效率小技巧

    前言 简单的提升工具效率需求可以借助Notepad编辑器实现.以前也用Python/Shell开发过本文中提到的需求,现在发现其实没有必要.本文介绍一些工作中常见的可以通过"Notepad+ ...

  3. Spring Cloud Alibaba | Nacos服务注册与发现

    目录 Spring Cloud Alibaba | Nacos服务注册与发现 1. 服务提供者 1.1 pom.xml项目依赖 1.2 配置文件application.yml 1.3 启动类Produ ...

  4. python笔记(2)--字符串

    一.字符串 字符串是不可变序列,具有序列的公共操作方法,具体操作见python笔记(1)--序列(列表 元组 range) 1.创建字符串 单引号:'Hello , I am Logan ! ' 双引 ...

  5. Spring Cloud Alibaba | Sentinel: 服务限流基础篇

    目录 Spring Cloud Alibaba | Sentinel: 服务限流基础篇 1. 简介 2. 定义资源 2.1 主流框架的默认适配 2.2 抛出异常的方式定义资源 2.3 返回布尔值方式定 ...

  6. Dapper学习笔记

    听说有个轻量化的orm Dapper,我就去了解下.试着对Sql Server和Mysql进行增删改查,体验不错.它不如EF臃肿,也比一般的封装灵活,比如我们封装了一个映射类.利用反射,在Execut ...

  7. HttpClient多文件上传代码及普通参数中文乱码问题解决

    该随笔记录了在实际项目中使用HttpClient调用外部api,需上传文件和普通参数的代码. 笔者在使用 HttpClient 调用 http api 接口时,需要服务端上传文件和一些普通参数给 ht ...

  8. MediatR-进程内的消息通信框架

    MediatR是一款进程内的消息订阅.发布框架,提供了Send方法用于发布到单个处理程序.Publish方法发布到多个处理程序,使用起来非常方便.目前支持 .NET Framework4.5..NET ...

  9. 万能RecyclerView的数据适配器BaseRecyclerViewAdapterHelper

    今天楼主才发现github上有这么一个好用的开源代码,充满好奇心的楼主马上使用了,特地分享给大家. 此项目的github地址: https://github.com/CymChad/BaseRecyc ...

  10. webService 的使用

    webService Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些 ...