Kubernetes 项目整体布局标题-固钉 [el-affix]

最新推荐文章于 2024-06-25 09:04:20 发布

富士康质检员张全蛋

最新推荐文章于 2024-06-25 09:04:20 发布

阅读量490

点赞数 4

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_34556414/article/details/137935972

版权

Vue.js 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

z-index 绝对定位设置堆叠顺序

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<style>
    .box1{
        width: 100px;
        height: 100px;
        position: absolute;
        background-color: red;
        z-index: 3;
    }
    .box2{
        width: 300px;
        height: 300px;
        position: absolute;
        background-color: blue;
        top: 100px;
    }
</style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

这样红色就覆盖紫色的了，哪个z-index大就覆盖哪个，通过调整z-index来调整覆盖的顺序。谁大谁就在上面。

标题-固钉 [el-affix]

Affix 固钉 | Element Plus

它会固定在浏览器的某个位置，将页面元素固定在特定可视区域。

在测边栏最上方有平台名称，滚轴混动的时候可能平台名字就没有了。如果将平台名设置为固钉，它会盖在侧边栏上面，往上滚动的时候会一直存在。无论怎么都要显示你的平台名称。

侧边栏是一个区域，封装了一个div 。

常用属性：

z-index是css的一个，它是设置你的一个层级的。

侧边栏就是一块div区域，其实也就是一个div。这里面可能有el-menu。在el-menu上面有el-affix，这个才是固钉。

:z-index="1200" 这里是一个绑定的v-bind，如果z-index="1200"这样设置1200就是一个字符串"1200"，但是使用v-bind这里可以是不然true或者数字类型。

侧边栏要有固定，还可以进行折叠。可以折叠宽度一小排，点了一下折叠，这些侧边栏的名字都可以去掉了，只留下图标，然后是一个很窄的侧边栏。

平台名称要处理折叠之后不显示，这里是动态class，如果折叠[isCollapse ? is-collapse : '']就是is-collapse的一个class。如果为false那么就没有这个class。

外层的span是用来控制样式的折叠的，里面的span才是平台logo。

<template>
  <div class="common-layout">
    <el-container style="height: 100vh;width: 100vw;">

      <el-aside class="aside" >

           <el-affix class="aside-affix" :z-index="1200">
                  <!--平台logo-->
                  <el-image class="aside-img" :src="logo"></el-image>
                  <!--平台名称，折叠后不显示-->
                <span :class="[isCollapse ? is-collapse : '']">
                    <span  class="aside-name">Kubernetes</span>
                </span>
           </el-affix>
      
     </el-aside>
      



      <el-container style="flex:8.5">
        <el-header style="flex:1;background-color: aqua;">Header</el-header>
        <el-main style="flex:8;background-color:greenyellow">Main</el-main>
        <el-footer style="flex:1;background-color: white">Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>



<script>

export default ({
    data() {
        return{
        //导入logo的图片,同时正常情况下不折叠
            logo: require('@/assets/img/k8s.png'),
            isCollapse: false
        }
    },
})
</script>

<style scoped>

   .aside{
    /*侧边栏折叠速度,点了折叠缩进去的速度*/
     transition: all .5s;
     background-color: #131b27;
     flex: 1.5;
   }
   .aside-img{
    width: 30px;
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 15px;
   }

   .aside-name{
     color: white;
     font-size: 20px;
     font-weight: bold;
     padding-left: 8px;
   }
</style>