利用浏览器UA动态设置侧边折叠 宽度

判断是不是移动端,移动端的话就折叠侧边栏为0px

首先这是pc端的

这是移动端的

根据浏览的ua判断,先写一个函数

export default () => {
  let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|Bl ackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windo ws Phone)/i)
  if (flag)//为真就是移动端
    return true
  else return false
}

引入函数

import flag from '@/tools/isMobile.js'

判断是不是移动端

//动态侧边栏宽度
const autoWidth = computed(()=>{
  if(isfold.value && flag()){//判断是不是移动端     
      return '0px';
  }else if(isfold.value ){//pc端
      return '64px'
  }else{
    return '200px'
  }
})

动态设置侧边栏宽度

<el-aside  :style="'width:'+autoWidth">
        <!-- //logo栏 -->
       <logoBar :isfold='isfold'/>
       <!-- 侧边栏 -->
       <menuBar :isfold='isfold' />
      </el-aside>