• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

实现一个动态改变的页面布局

如果要实现这个功能,我们就需要去写一个layout布局的文件,然后通过一个动态的设置去响应这个变化。

这个问题其实可以分两个方面去解析:

  1. 布局文件怎么去做
  2. 怎么去响应设置

布局文件

对于写一个布局文件,其实也不是很难,但是就是不要钻牛角尖,就好比,你可能会去想,一个侧边栏导航要怎么变成顶栏的横向导航?

其实这种想法太过于钻牛角尖,为什么我们不能做两个导航呢?

侧边栏sidebar我们使用一个导航,header里面我们也放一个导航,然后v-if判断不就好了。

没必要想那么复杂,很多东西就是组件化,响应式数据进行显示。

而且很多框架都预设了一些布局,我们可以利用那些布局,然后针对性的操作,大部分框架对这个些布局都考虑到了,比如说这个侧边栏本来有,我设置让他不显示,那么相对的他的相邻元素的宽度,都会有对应的变化适应。

布局文件配合插槽使用。

怎么去响应数据

一般来说,有两种方式,一种就是vuex,简单粗暴,配合持久化插件,基本上每次都能很完美的使用。

第二种的话,就考虑演示问题,比如我们可能要将这个布局分享个别人,这样当别人打开你分享的链接时,你们的布局是相同的,针对这种情况,我们可以考虑使用路由参数query。

以为vue-router支持只传参,不改变路由,所以我们可以每次设置的时候push传入配置参数。

但是这样会衍生出一个问题,就是会触发路由守卫,如果你在路由守卫设置了一个响应变化,如:进度条

那么你就需要去做个判断,如果进入的是同一个路由,就不触发进度条事件。

0
  • 本文分类:vue 开发实战
  • 本文标签:vue布局动态
  • 流行热度:已超过 440 人围观了本文
  • 最后更新:2020年12月3日 - 22时37分15秒
  • 发布日期:2020年12月3日 - 22时37分15秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码