1、使用calc实现自适应
需求:
下图是一个vue-Element-admin的一个框架
1、代表侧边栏(可展开)
2、代表是所有页面共有的头部区域
3、4、5代表3张el-card卡片
6、是在使用el-col的:push=“1”
要实现自适应使用el-row和el-col就够了.但是5是一个日历组件。它有一个最小的宽度,如果特别小会被隐藏掉。因此有一个最小值。
解决方案:
’4占据15份,6占据1份,5占据八份)
1、使用媒体查询,当缩小到日历变形的临界值后,给5一个固定宽度(530px).4的大小就等于calc(95.8% - 530px)。因为6占据1份。是24分支1。然后就可以实现了。
本来大算给4一个min-width。但是展开侧边栏会导致原来的100%减小,而四也不能自适应。最终结果会导致5被挤到下边去。
代码:
@media screen and (max-width: 1700px) {
.el-col-15 {
width: calc(95.8% - 530px);
}
.el-col-8 {
width: 530px;
}
}
2、根据需求隐藏侧边栏的一个导航菜单模块
这个bug经过好几个部分才得以解决。
一开始
因为这个框架是根据路由来展示导航菜单的。有一个关键属性hidden: true,。当路由匹配规则有这个属性时。这个模块就不会再侧边栏中显示。就像下面这种。
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
然后。我的思路就很简单。请求接口。拿到值。因为返回来的值也是布尔类型。我就直接放在了hidden上了。结果,火狐浏览器正常(也可以删去对应模块)。谷歌则打不开了。
接下来
换了一种思路。因为这个侧边栏的导航菜单是拿路由匹配规则,做的数组,然后循环渲染出来的。我只要在渲染前,拿到数组。根据需求,删除对应的数组即可。
逻辑没错,也可以实现。但是出了一个新bug.浏览器首次打开没有侧边栏。但是之后都正常。
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
if (JSON.parse(localStorage.getItem('init')).is_child) {
state.routes.splice(7, 1)
}
后来我发现。是因为先请求接口是异步的。我登录后跳转路由。那时候。请求init的接口的还没有完成。本地也就没有储存。也就不会执行上面代码。但是之后本地都有储存了。自然可以了。
改成下面这样就可以了
this.$store.dispatch('user/login', newloginForm).then(() => {
getInit().then(res => {
localStorage.setItem('init', JSON.stringify(res.data.data))
})
}).catch(() => {
this.$message.warning('账号或密码错误,登入失败')
}).then(() => {
this.$router.push('/home')
})
3、Cascader动态加载默认值的问题
这个bug困扰了很长一段时间。怎么搞都搞不定。明明是复制粘贴的代码。为什么人家可以我不行。都是相似的接口一样的数据。
后来发现省市联动的最后一个区。我拿到的值最后是以01结束。但是省市的接口根本就没有01这个数据。所以拿不到。
后来改了数据后发现火狐可以正常显示默认数据。但是谷歌不可以。4个省市联动,有一个怎么都显示不出来。
后来灵光一闪。可能是给他反映的时间不够。我把定时器的延长一会就好了。
setTimeout(() => {
this.$refs.cascader.panel.lazyLoad()
this.$refs.cascader_now.panel.lazyLoad()
}, 1500)