主页布局

1.饿了吗container布局容器

image

//如下html代码和css代码是从传送门中复制粘贴后根据实际需求再进行修改

//html代码
<template>
  <div id="index">
    <el-container >
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
    <el-button @click="logout" type="success">退出</el-button>
  </div>
</template>

//css代码
<style lang="scss" scoped>
#index {
 width: 100%;
 height: 100%;
  .el-container {
      height: 100%;
      .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
     }
    
    .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;
    }
  }
}

</style>

2.饿了吗Layout 布局:

image

//如下html代码和css代码是从传送门中复制粘贴后根据实际需求再进行修改

//html代码
<el-row>
  <el-col :span="4">
     <div class="grid-content bg-purple">
        <img src="../assets/images/logo.jpg" height="60px" width="180px" alt="">
     </div>
  </el-col>
  <el-col :span="18">
       <div class="grid-content bg-purple-light">招行度量系统</div>
  </el-col>
  <el-col :span="2">
    <div class="grid-content bg-purple">
        <el-button type="success" @click="logout">退出</el-button>
    </div>
  </el-col>
</el-row>

//css代码
 .el-row {
    .el-col-18 {
       font-size: 30px;
       font-weight: 900;
     }
    .el-col-4 {
       text-align: left;
     }
    .el-col-2 {
       text-align: right;
     }
}

3.饿了吗MessageBox 弹框:

image

//原本的退出键点击逻辑代码
logout(){
      window.sessionStorage.removeItem('token');
      //编程式导航
      this.$router.push("login");
}

//将上面的代码修改如下就有弹框效果
logout() {
      this.$confirm('您正在退出账号, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
      }).then(() => {
          //点击确定，清楚token，跳转到登陆页
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
          window.sessionStorage.removeItem('token');
          //编程式导航
          this.$router.push("login");
      }).catch(() => {
         //点击取消
         this.$message({
         type: 'info',
         message: '已取消退出'
         });          
      });
    }

4.vue中的 scoped:

Ⅰ.原理: 会在当前组件的style标签中所有的选择器后面，添加[]属性选择器
Ⅱ.作用: 表示它的样式作用于当下的模块，很好的实现了样式私有化
Ⅲ. 注意点: 谨慎使用，虽然解决了样式私有化的问题，但同时每个样式的权重加重，样式变得不易修改

image

本文同步发表在我的个人博客：https://www.lubaojun.com/