1, 很多场景会用到折叠框,展开和收缩两个方向,我以前的做法是放两个相反的icon图标,然后用一个flag来控制.现在有一个新的方法:
用给一个div包裹这个一个icon,然后点击切换之后绑定一个class,这个class通过transform: rotate(180deg)旋转div框180度.就可以实现了.
参考森林项目maphandle.vue;
2, 在app.vue的头部,用上了三重背景加上calc(计算),注意多重背景的写法.
3, 在实景 监测页面有个动态绑定多重cass的数组写法,值得参考,不知道为什么写成对象的形式不可以,写成三元判断就可以.实景项目布局遇到个问题.在上下两列弹性布局中,刚开始上面左边的参数是采用收缩出现滚动条的布局方式的.后来改成媒体查询改变高度,还是不能完美解决,后来又增加 body 的 min- height 和 min-width 才解决.后来一想,如果直接使用 min 来限制,不做媒体查询,是否可行?如果这部分的主体固定了高度是可以的,只是这个 min-height 要选的足够好,所有还是需要有一个查询,适应小屏幕.因为我用的是 flex 1 所有还是需要多级媒体查询适应.当然最后发现, min-height 的选择很关键.把 min-height 设置为800之后,可以取消最后一个 media 查询.
4,在实景监测代码里面有一个展示实时时间(需要格式化成标准格式)以及5分钟获取数据的功能,到时候大探也会用到.