vue动态修改侧边菜单栏宽度

1.添加可修改宽度的dom元素

          菜单宽度 
           px
          保存
        

2.在data中定义宽度变量 sideWidth

sideWidth:0,

3.逻辑处理

 /********侧边栏宽度********/
 sideWidthSave(){
   localStorage.setItem('sideWidth',this.sideWidth)
   var sidebarContainer =  document.getElementById("sidebar-container"); // 使用合适的选择器
   var mainContainer =  document.getElementById("main-container");
   sidebarContainer.style.setProperty('--base-sidebar-width', this.sideWidth +'px');
   mainContainer.style.setProperty('--base-sidebar-width', this.sideWidth +'px');
   // console.log('****that.sideWidth***',this.sideWidth)
   // console.log('****`${this.sideWidth}px`***',`${this.sideWidth}`)
   /* location.reload();*/
 },

4.页面加载时，调用存储的宽度值

    created() {   
      /****左侧菜单宽度****/
      let NewSideWidth=localStorage.getItem('sideWidth')
      if(NewSideWidth){
        this.sideWidth = NewSideWidth
        this.$nextTick(function () {
          var sidebarContainer =  document.getElementById("sidebar-container"); // 使用合适的选择器
          var mainContainer =  document.getElementById("main-container");
          sidebarContainer.style.setProperty('--base-sidebar-width', this.sideWidth +'px');
          mainContainer.style.setProperty('--base-sidebar-width', this.sideWidth +'px');
        })
      }
    },

注：–base-sidebar-width 是scss中侧边菜单宽度变量