判断是不是移动端,移动端的话就折叠侧边栏为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>