1. 修改 src\settings.js 中 fixedHeader 值为 true,默认为 false
2. 说明
找到 src/layout/components/Settings/index.vue,这就是 Vue Element Admin 右边齿轮模样的按钮面板组件文件。
点击可以弹出面板,其中就有固定头部的选项
下面看看他是如何进行控制的,在 src/layout/components/Settings/index.vue 中有一条计算属性(computed)fixedHeader,该计算属性定义了 getter、setter 方法,用来控制 store 中的状态。
再看到 src/store/modules/settings.js,这是有关 store 的控制 JS 代码,其中可以看到会读取一些默认的配置,默认的配置其实就是 src/settings.js 里的设置,也就是第 1 节我们修改的那个文件。
下面再看到文件定义了 mutations 和 actions,通过他们配置改变全局状态。
最后看看导航栏是如何通过全局状态属性进行固定与不固定的,下面是 src/layout/index.vue,这个文件是 Vue Element Admin 的布局文件,其中通过动态 class 实现。 fixedHeader 是一个 Boolean 属性,从 store 中获取
fixed-header CSS 如下