需求描述:项目有些页面不需要左侧栏,有些需要左侧栏,左侧栏宽度是可配置的,以下是vue项目解决方法:
1.在根目录/static/config.js配置宽度(此文件通常配置一些共用文件,比如退出登陆地址,附件上传后的预览地址等信息,会随着打包也会打包,打包后也可修改配置)
(function() {
window.globalConfig = {
loginUrl:'',//登陆地址
logoutUrl:'',//退出
leftWidth: '240',// 左侧宽度
}
})()
2.在/src/config/env.js增加配置
//引入全局配置
export const globalConfig = window.globalConfig || {}
const loginUrl = globalConfig.loginUrl
const logoutUrl = globalConfig.logoutUrl
const leftWidth = globalConfig.leftWidth
export {
loginUrl,
logoutUrl,
leftWidth
}
3.在对应的vue组件里引入/src/config/env.js中的leftWidth,在路由传参时,根据hideLeft判断是否隐藏左侧栏,然后去除左侧栏的另一部分计算宽度
<template>
<div :style="viewWidth" class="">
</div>
</template>
import {leftWidth} from 'src/config/env'
computed:{
viewWidth() {
return {
'width': `calc(100% - ${this.$route.meta.hideLeft ? 0 : leftWidth }px)`
}
}
},
4.路由配置:以下是同一个组件,来源不同展示不同,根据路由判断是否显示左侧栏
export default [
{
name: 'noleftDetail',
path: 'myproject/noleftDetail',
meta: {
name: '项目详情',
hideLeft: true,
},
component: resolve => require(['views/myproject/detail'], resolve)
},
{
name: 'detail',
path: 'myproject/detail',
meta: {
name: '查看详情',
hideLeft: false,
},
component: resolve => require(['views/myproject/detail'], resolve)
},
]
网友评论