开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第25天，点击查看活动详情
主题状态管理
需要修改默认值直接修改源码中的DEFAULT_STATE
注意在设置抽屉中切换后会缓存在本地,修改配置后要手动清理缓存或者点击设置抽屉中的重置按钮才会生效
自定义主题原理: 把颜色相关的scss变量转为css变量
非颜色相关的变量还是使用scss的覆盖方式写在最上面
主题兼容ie
1.使用css变量换主题唯一缺点就是不兼容ie,只能使用v1.4.0的换主题的方式
2.创建一份scss文件后面加 -dark 适配暗黑模式
3.在setting-drawer.vue中配置
4.修改换主题的方法
开启keepAlive
TAB_KEEP_ALIVE值改为true即可开启KeepAlive,vue中要写nareme才能生效
当打开新的tab时,会获取当前路由对应的组件名称更新到tabs数据中
RedirectLayout用于实现刷新路由的功能,刷新时会把当前路由信息放在theme状态管理的routeReload中
theme状态管理的keepAliveInclude是通过getter实现的
!keep-alive是根据组件的名称缓存的,同一个路由参数不同,但为同一个组件也只会缓存一份,需要watch路由$route变化更新页面数据,或者在生命周期actived中处理
修改语言
继承了i18n插件
只需要一种语言
去掉i18n-icon组件
删除src/i18n目录 去掉$t相关的直写文字
窗口尺寸监听
window.onresize =() => {}监听窗口尺寸,在销毁时要卸载
contentWidth() {
this.resizeCharts();
}
自定义iconfont
1.在iconfont中创建项目
2.FontClass前缀写el-icon--
3.把需要的图标加入购物车
4.下载项目需要的字体文件和css
5.把文件放入项目的public中
6.文件重新命名规范
7.在index.html中引入css文件
关闭响应布局
layout/index.vue中使用style-responsive属性关闭布局样式的响应式
关闭后移动端会整体缩放显示
:style-responsive= "false"
给body设置最小宽度
class="ele-bodu-limit-width"
