vue结合js做一个响应式的侧边栏

<template>
  <div class="onetestwrapper" :style="{'--onetestwidth':width,'--onetestheight':height,'--onetestheightterm':onetestheightterm}">
    <div class="one">
      <div class="onetermchild">
            <i class="el-icon-office-building iconitem"></i>
            酒店
      </div>
    </div>
    <div class="two">
      <div class="onetermchild">

            <i class="el-icon-add-location iconitem"></i>
            风景

      </div>
    </div>
    <div class="three">
     <div class="onetermchild">

           <i class="el-icon-truck iconitem"></i>
           火车

     </div>
    </div>
    <div class="four ">
      <div class="onetermchild">

            <i class="el-icon-food iconitem"></i>
            订餐

      </div>
    </div>
    <div class="five ">
      <div class="onetermchild">

            <i class="el-icon-pear iconitem"></i>
            旅游

      </div>
    </div>
    <div class="six ">
     <div class="onetermchild">

           <i class="el-icon-tickets iconitem"></i>
           门票

     </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "oneTest",
  data(){
    return{
      width:'',
      height:'',
      //每一行的高度
      onetestheightterm:''
    }
  },
  mounted() {
    console.log("我是oneTest中的mounted")
    this.gethomewidth()
    window.addEventListener('resize', this.gethomewidth); // 在窗口大小改变时重新获取窗口宽度
    window.addEventListener('resize', this.gethomeheight);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.gethomewidth); // 组件销毁时移除resize事件监听器
  },
  methods:{
    gethomewidth(){
      // 获取窗口宽度
      var windowwidth = window.innerWidth
      windowwidth = windowwidth-60
      this.width = windowwidth
      console.log("获得浏览器宽",windowwidth)
      this.width = parseInt(this.width/8)
      this.width = this.width+'px'
      console.log('第一部分的宽度为',this.width)
    },
    // 获得窗口height度
    gethomeheight(){

      var windowheight = window.innerHeight
      windowheight = windowheight-160
      this.height = windowheight
      console.log("获得浏览器高度",windowheight)
      this.height = parseInt(this.height)
      // 计算每一行的高度
      this.onetestheightterm = parseInt(this.height/13)+'px'
      console.log("每一行的高度",this.onetestheightterm)
      this.height = this.height+'px'
      console.log('第一部分的高度为',this.height)

    }
  },
}
</script>

<style scoped>
:root{
  --onetestwidth:'';
  --onetestheight:'';
/*  每一行的高度*/
  --onetestheightterm:''
}
.onetestwrapper {
  margin: 25px;
  /* 声明一个容器 */
  display: grid;
  /*  声明列的宽度  */
  grid-template-columns: repeat(1,var(--onetestwidth));
  /*  声明行间距和列间距  */
  grid-gap: 20px;
  /*  声明行的高度  */
  height: var(--onetestheight);
  grid-auto-rows: var(--onetestheightterm);
}
.one {

  background: #19CAAD;
}
.two {
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.iconitem {
  color: rgb(0, 131, 246);
}
.onetermchild{
  position: relative;
  height: 30px;
  width: 60px;
  left: 40px;
  top: 14px;
}
.onetermchildfont{

  left: 30px;
}
</style>

效果
【vue结合js做一个响应式的侧边栏的布局】 https://www.bilibili.com/video/BV1xL411B7KG/?share_source=copy_web&vd_source=58607fc67d165b8caff1ed8bfcefd35b