zoukankan      html  css  js  c++  java
  • 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- 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>>
  • 相关阅读:
    centos7使用163 yum源
    Package has no installation candidate解决方法
    HTML 5 canvas相关
    git rebase 使用总结
    Redis不是只有get set那么简单
    k8s---pod常用操作
    Navigator.sendBeacon 无阻塞发送统计数据
    如何在页面关闭或跳转时优雅的发送Ajax请求
    mysql的触发器、视图、索引,受益匪浅
    杂集:centos7中利用logrotate工具切割tomcat日志
  • 原文地址:https://www.cnblogs.com/javascript9527/p/11343126.html
Copyright © 2011-2022 走看看