趁热打铁——Vue实现左侧可伸缩导航栏

效果：

leftSlider.vue

<template>
  <div class="slideBox" ref="sildebox">
    <div class="topBox">
      <span v-show="isShow">^w^一柒的作品集</span>
      <i class='bx bx-menu' id="btn" @click='narrow'></i>
    </div>
    <div class="content">
      <ul>
        <li>
          <i class='bx bx-grid-alt'></i>
          <span v-show="isShow">项目展示</span>
        </li>
        <li>
          <i class='bx bx-user'></i>
          <span v-show="isShow">喜欢的UI</span>
        </li>
        <li>
          <i class='bx bx-chat'></i>
          <span v-show="isShow">学习经历</span>
        </li>
        <li>
          <i class='bx bx-pie-chart-alt-2'></i>
          <span v-show="isShow">生活分享</span>
        </li>
        <li>
          <i class='bx bx-folder'></i>
          <span v-show="isShow">关于我</span>
        </li>
      </ul>
    </div>
    <div class="bottomBox">
      <span v-show="isShow">又到了说谎的季节</span>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      isShow:true
    }
  },
  methods: {
    narrow(){
      this.isShow=!this.isShow
      let liList =document.querySelectorAll('li')
      if(this.isShow===false){
        this.$refs.sildebox.style.width='5vw'
        console.log(liList[0].style) 
        liList.forEach(item=>{
        item.style.display='flex'
        item.style.flexDirection='column'
        item.style.justifyContent='center'
        item.style.alignItems='center'
       })        
      }else{
        this.$refs.sildebox.style.width='16vw'
        liList.forEach(item=>{
        item.style.display=''
        item.style.flexDirection=''
        item.style.justifyContent=''
        item.style.alignItems=''
       })
      }

    }
  },
}
</script>

<style lang='less' scoped>
@import url('https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css');

  .slideBox{
    position: relative;
    width: 16vw;
    height: 100%;
    font-family: "Poppins" , sans-serif;
    background: #11101D;
    transition: all 0.5s ease;
    .topBox{
      width: 100%;
      height: 10%;
      background: #11101D;
      display: flex;
      align-items: center;
      justify-content: space-around;
      span{
        color: #fff;
        font-size: 20px;
        font-weight: 600;
        transition: all 0.5s ease;
        white-space: nowrap;
        overflow: hidden;
      }
      i{
        cursor: pointer;
        color: #fff;
        font-size: 28px;
        min-width: 50px;
      }
    }

    .content{
      width: 100%;
      transition: all 0.5s ease;

      ul{
        width: 100%;
        // margin-left: 20px;
        
      }
      ul li{
        width: 90%;
        color: #fff;
        list-style: none;
        margin: 8px 0;
        font-size: 20px;
        padding: 20px 40px;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
      }
      li:hover{
        color: black;
        background-color: #fff;
        border-radius: 15px;
        span{
        color: black;
        }
      }
      i{
        margin-right: 10px;
      }
    }

    .bottomBox{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 10%;
      background: #1d1b31;
      display: flex;
      justify-content: center;
      align-items: center;
     transition: all 0.5s ease;
    }
    span{
      color: #fff;
      font-size: 20px;
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
    }
  }

</style>

伸缩功能

通过点击事件narrow()来对已有样式进行修改。
用了两种方式获取节点信息:
1.在标签上加ref属性(ref='domName')，通过this.$refs.domName获取节点。
2.通过常规document.querySelectorAll('li')获取全部li节点。 最后通过节点上的style属性对css样式进行修改。

出现过的问题以及解决方案

如果不给文字设置:white-space:nowrap;overflow:hidden;
放大时，盒子宽度由6vw通过动画变为16vw是一个过程，而文字通过v-show是瞬间出现的，就会导致盒子宽度还没延伸到足够容纳文字容器之前，文字会出现自动换行且超出部分不会隐藏的情况。

注:此处故意将white-space和overflow移除，且延长动画显示效果。

解决:给文字容器添加white-space:nowrap;overflow:hidden。