css实现侧边栏中树枝的效果

电脑版发表于：2020/8/15 18:06

[TOC]

#### 效果如下

就是这种侧边栏中间那一块的效果：

<img src="https://img.tnblog.net/arcimg/aojiancc2/5685364bbb714d63989b464e6c801cea.png" width="360px" height="auto">

具体效果如下：
<img src="https://img.tnblog.net/arcimg/aojiancc2/f06a047ac8394468a764f4760db49ced.png" style="width:266px;height:auto;">

tn2>左边的虚线是利用ul左边框实现的：`border-left: 1px dashed #ccccd8`

tn4>横着的虚线就是利用里边的一个div实现的，也是通过边框来实现的。

tn5>这样写后上面和下面都会冒出来一截枝枝，我们利用伪类选择器在上面和下面生成一个元素来挡住冒出来的枝枝就行了

**具体完成的代码如下：**
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        .aside-content {
            max-height: 238px;
            overflow: hidden;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 12px 16px 16px 16px;
            position: relative;
        }

        /* 使用伪类选择器凭空产生一个div，挡住上面冒出来的枝枝，
           注意要通过left,和top调整到当好重叠在上面冒出来的枝枝位置才能挡住，也就是要和aside-content中
           padding设置左上距离一致才行
        */
        .aside-content::before {
            display: block;
            position: absolute;
            content: '';
            width: 1px;
            height: 12px;
            background: #fff;
            left: 16px;
            top: 12px;
        }

        /* 使用伪类选择器凭空产生一个div，挡住下面冒出来的枝枝，
        */
        .aside-content::after {
            display: block;
            position: absolute;
            content: '';
            width: 1px;
            height: 12px;
            background: #fff;
            left: 16px;
            bottom: 16px;
        }

        .myul {
            padding-inline-start: 0px;
            margin-block-start: 0px;
            margin-block-end: 0px;
            padding: 0;
            margin: 0;
            border-left: 1px dashed #ccccd8;
            list-style: none;
        }

        .myul li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-bottom: 16px;
        }

        /* 最后一个li去掉底部的间距 */
        .aside-content ul li:nth-last-child(1) {
            margin-bottom: 0;
        }

        .special-column-name {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            color: #555666;
            font-size: 14px;
            line-height: 24px;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            overflow: hidden;
            position: relative;
        }

        /* 利用div实现横着的枝枝效果 */
        .special-column-bar {
            width: 12px;
            height: 1px;
            border-bottom: 1px dashed #ccccd8;
            -ms-flex-negative: 0;
            flex-shrink: 0;
        }
    </style>
</head>

<body>
    <div class="aside-content">
        <ul class="myul">
            <li><a class="special-column-name">
                    <div class="special-column-bar"></div>查看视频
                </a></li>
            <li><a class="special-column-name">
                    <div class="special-column-bar"></div>资料下载
                </a></li>
            <li><a class="special-column-name">
                    <div class="special-column-bar"></div>查看视频
                </a></li>
            <li><a class="special-column-name">
                    <div class="special-column-bar"></div>资料下载
                </a></li>
            <li><a class="special-column-name">
                    <div class="special-column-bar"></div>查看视频
                </a></li>
        </ul>
    </div>

</body>

</html>
```

#### 使用vue element ui实现一个这种侧边栏效果

<img src="https://img.tnblog.net/arcimg/aojiancc2/1a59f6615db142b9b6751001c4276f84.png" width="360px" height="auto">


在原来项目里边写，结构就不改了，前面去使用组件循环去生成里边的内容的，情况比较多，我这里简化一下。

**里边的组件**
默认的里边比较复制要处理各种情况，各种类型的数据显示下载这些，这里简化到非常的简单只显示一下就行了,组件里边就是一个li
```
<template>
  <li>
    <a class="special-column-name">
      <div class="special-column-bar"></div>实验资料下载哇
    </a>
  </li>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    mounted() {
    },
    // 组件方法
    methods: {
    }
}
</script>


<style  lang="scss" scoped>
.special-column-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #555666;
  font-size: 14px;
  line-height: 24px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* 利用div实现横着的枝枝效果 */
.special-column-bar {
  width: 22px;
  height: 1px;
  border-bottom: 1px dashed #ccccd8;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
</style>
```
**引入组件：**
```
import CourseSourceItemNarrowConcise from './components/lab-course/course-source-item-narrow-concise.vue'

export default {
  components: {
    CourseSourceItemNarrowConcise,
  }
 }

```
**引入组件后循环生成：**
```
<el-card class="box-card">
  <div slot="header" class="clearfix box-header">
    <span class="box-title"><img src="../../assets/imgs/labroom/course-icon.png">实验资料</span>
  </div>
  <div class="aside-content">
    <ul class="labroom_information">
      <CourseSourceItemNarrowConcise v-for="(it, sindex) in resources" :r-type="it.recourseType + ''"
        :item-data="it" :chapter="chapter" :key="sindex" class="box-item" />
    </ul>
  </div>
</el-card>
```
**父组件哪里加入样式：**
```


<style lang="scss" scoped>
.aside-content {
  max-height: 238px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  position: relative;
}

/* 使用伪类选择器凭空产生一个div，挡住上面冒出来的枝枝，
           注意要通过left,和top调整到当好重叠在上面冒出来的枝枝位置才能挡住，也就是要和aside-content中
           padding设置左上距离一致才行
        */
.aside-content::before {
  display: block;
  position: absolute;
  content: '';
  width: 1px;
  height: 12px;
  background: #fff;
  left: 0px;
  top: 0px;
}

/* 使用伪类选择器凭空产生一个div，挡住下面冒出来的枝枝，
        */
.aside-content::after {
  display: block;
  position: absolute;
  content: '';
  width: 1px;
  height: 12px;
  background: #fff;
  left: 0px;
  bottom: 0px;
}

.labroom_information {
  padding-inline-start: 0px;
  margin-block-start: 0px;
  margin-block-end: 0px;
  padding: 0;
  margin: 0;
  border-left: 1px dashed #ccccd8;
  list-style: none;
}

.labroom_information li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 16px;
}

/* 最后一个li去掉底部的间距 */
.labroom_information li:nth-last-child(1) {
  margin-bottom: 0;
}
</style>
```
##### 增加图标的显示效果

<img src="https://img.tnblog.net/arcimg/aojiancc2/e8b030d43a6541159e55c7c6d433a13f.png" width="360px" height="auto">


代码如下，只调整组件里边的一点结构和样式就行了，js里边留下的部分处理逻辑的不用管：
```
<template>
  <li>
    <a class="special-column-name">
      <div class="special-column-bar"></div>
      <img :src="require('@/assets/imgs/labroom/' + titleImgs[rType])">
      
      <span class="describle" :title="itemText[rType]['bntText']+'-'+itemData.name"> {{ itemText[rType]['concise'] }}:{{ itemData.name }}</span>
    </a>
  </li>
</template>

<script>
import CpProgress from '@/components/cp-progress/cp-progress.vue'
export default {
  name: 'CourseSourceItem',
  components: {
    CpProgress
  },
  props: {
    rType: {
      type: String,
      default: ''
    },
    itemData: {
      type: Object,
      default: () => { }
    },
    chapter: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      titleImgs: {
        '0': 'course-video-1.png',
        '1': 'course-video-1.png',
        '2': 'rar.png',
        '3': 'course-exam-paper.png',
        '4': 'course-courseware.png',
        '5': 'course-exp.png'
      },
      itemText: {
        '1': {
          // bntText: '观看实验视频',
          bntText: '观看视频',
          concise: "视频",
          btnColor: '#3699FF',
          lab: '视频'
        },
        '2': {
          // bntText: '素材资料下载',
          bntText: '素材下载',
          concise: "素材",
          btnColor: '#3699FF',
          lab: '素材'
        },
        '3': {
          bntText: '试卷下载',
          concise: "试卷",
          btnColor: '#687DF2',
          lab: '试卷'
        },
        '4': {
          // bntText: '课件资料下载',
          bntText: '课件下载',
          concise: "课件",
          btnColor: '#FF6935',
          lab: '课件'
        },
        '5': {
          bntText: '进入学习',
          concise: "学习",
          btnColor: '#3699FF',
          lab: ''
        }
      },
      linearColors: [{
        v: 100,
        s: '#3699FF',
        e: '#3699FF'
      }]
    }
  },
  mounted() {
    console.log(this.itemData)
  },
  methods: {
    btnActon() {
      const _self = this
      console.log(_self.itemData)
      if (_self.rType === '1') { // 看视频
        _self.$utils.openwindow(`/#/sublab/watch-the-video/${_self.$route.params.courseid}/${_self.chapter.id}/${_self.itemData.urlID}`, '视频播放')
      } else if (_self.rType === '2' || _self.rType === '4' || _self.rType === '3') {
        this.$utils.downloadOssFil(_self.itemData.urlID, _self.itemData.name)
        // 作业
      } else if (_self.rType === '5') { // 查看实验报告
        _self.$utils.openwindow(`/#/sublab/learning-lab/${_self.$route.params.courseid}/${_self.chapter.id}/${_self.itemData.labInfo.id}?classid=${this.$route.query.classID}&t=${new Date().getMilliseconds()}`, '实验详情')
      }
    },
    // 下载文件
    downLoadFile(id) {
      var self = this
      self.$http.get('/oss/api/SmartFiles/GetFileUrl', {
        fileId: id
      }).then(res => {
        if (res.success) {
          window.location.href = res.data.url
        } else {
          self.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    }
  }
}
</script>

<style  lang="scss" scoped>
.special-column-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #555666;
  font-size: 14px;
  line-height: 24px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

/* 利用div实现横着的枝枝效果 */
.special-column-bar {
  width: 16px;
  height: 1px;
  border-bottom: 1px dashed #ccccd8;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}


.special-column-name img {
  width: 24px;
  height: 24px;
  border: 1px solid #e8e8ed;
  border-radius: 2px;
  display: block;
  margin-right: 8px;
  margin-left: 4px;
}

// 内容超出显示省略号
.special-column-name .describle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
```

剑轩

css实现侧边栏中树枝的效果

{{item.title}}