书接上回
目前已经进展到了可以进入首页了
但是左侧菜单栏是不好用的，top工具栏以及tab标签页是不好使的，接下来就一个一个修复
左侧菜单的修复
image
控制台报这个警告于是查看了一下element-plus的文档发现这个标签名字发生了改变，从el-submenu变成了el-sub-menu
然后控制台报了一个错
Failed to resolve component: component
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
经过查询通过修复src/layout/components/Sidebar/Link.vue 这个文件修复了问题
<template>
<a :href="to" target="_blank" rel="noopener" v-if="linkProps(to)">
<slot />
</a>
<router-link :to="to" v-else>
<slot />
</router-link>
</template>
<script>
import * as Vue from "vue";
import { isExternal } from "@/utils/validate";
export default {
props: {
to: {
type: String,
required: true,
},
},
methods: {
linkProps(url) {
return isExternal(url);
},
},
};
</script>
修改了上面的文件之后，控制台继续报错
<router-view> can no longer be used directly inside <transition> or <keep-alive>.
Use slot props instead:
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
这个问题原来是这样
<template>
<router-view />
</template>
修改成
<template>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</template>
即可。需要修改两个地方 src/layout/components/AppMain.vue src/App.vue
经过上面的修复控制台已经不报错了，但是左侧菜单栏还是不好使。如图：
image
这个问题通过修改 src/styles/sidebar.scss 里面的css解决，具体请看下面的源码这里就不列举了
然后发现一个问题
:export {
menuText: $menuText;
}
不好使，后来把导出的文件名添加了一个module修改完成
image
然后左侧菜单栏修改完成 如下
image
此时的代码如下：左侧菜单栏修改
全屏功能修复
点击全屏发现如下提示
image.png
通过查看源码以及对应的文档发现tmd 名字变了
//src/components/Screenfull/index.vue
click() {
if (!screenfull.enabled) {
this.$message({
message: "you browser can not work",
type: "warning",
});
return false;
}
screenfull.toggle();
},
//修改成
click() {
if (!screenfull.isEnabled) {
this.$message({
message: "you browser can not work",
type: "warning",
});
return false;
}
screenfull.toggle();
},
修改之后就可以正常使用了，这里就不打tag了
字体大小切换功能修复
点击切换报这个错
Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'scrollLeft')
这个问题是src/layout/components/TagsView/ScrollPane.vue 文件里获取this.refs.wrap;获取不到导致的，查询官方api得到如下修改方案
//修改为
this.$refs.scrollContainer.$refs.wrap$;
未完待续...
