横向电梯导航（动态）

根据下拉框实现横向的电梯导航

  <el-select  @change="getmonth">
    <el-option v-for="item in mouthData" :label="item.label" :value="item.value"></el-option>
  </el-select>


data(){
return {
       isActive: 1,  
    }
}

methods:{
   getmonth(month) {
      const monthNum = month.charAt(0) === "0" ? month.slice(1) : month; //去除第一个为0的字符
      console.log(monthNum);//月 1,2,3,4,5,6,7,8,9,10,11,12
      
      this.isActive = monthNum - 0; //实现动态添加类名
      this.$nextTick(() => {
      //offsetWidth 获取 已经被添加上class="active"类名的子盒子宽度
       //  offsetWidth  返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
       //  offsetHeight 返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
       //  clientWidth  返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
       //  clientHeight  返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
  
        const domwidth = document.getElementsByClassName(`active`)[0].offsetWidth;
        console.log("被选中的子盒子宽度", domwidth);
        
        const maxBox = this.$refs.twotwo; //获取最大父级盒子
        maxBox.scrollTo({
          left: (monthNum - 0) * Number(domwidth) - Number(domwidth),
          behavior: "smooth", //添加过渡效果
        });
      });
    },

}