近日做了一枚妥妥的切图仔，搞了一个纯静态的网站。虽然说纯静态页面加上一点交互效果，使用万能JQ一把梭是最香的，但是立志做一名优秀切图仔的我（舔着 ~ 脸），还是用了vue3，这就在所难免的会遇到一些小问题，本着坑总是要填的原则，让我们开启日常杂项处理吧~
1、左侧固定右侧自适应布局
这个可以说是史诗级话题了，网上解决方法铺天盖地，这里就说flex方式
<div class="wrap">
<div class="nav"></div>
<div class="content"></div>
</div>
.wrap{
width: 100%;
overflow: hidden;
display: flex;
}
.nav{
width: 260px;
background: #fff;
position: fixed;
left: 0;
top: 0;
height: 100%;
overflow: auto;
}
.content{
flex: 1;
margin-left: 260px;
min-width: 900px;
overflow: auto;
}
2、vue-router link添加点击方法
通常router-link点击会直接跳转，如果想做拦截可以使用监听或者拦截方法，但是有时候我们只想单独添加一个点击的方法，我们可以通过添加修饰符的方法。
<router-link :to="{path: item.id}" @click.native="routerClick">{{item.title}}</router-link>
3、通过 querySelector 获取id名称时报错
这个情况之前本人没有遇到过，大概的报错是这个样子的 # Failed to execute 'querySelectorAll' on 'Document': '#123' is not a valid selector。这个错误其实是 querySelector 的一种机制，它不允许查找名字全为数字的节点，只需要在节点id或者class上添加一些其他字符就可以了。
4、点击路由跳转，同时页面滚动到顶部
在vue中，可以通过创建时的scrollBehavior方法去设置
const router = createRouter({
history: createWebHashHistory(),
scrollBehavior(to, from, savePosition) {
return {
top: 0
}
},
routes
})
如果是个别页面需要滚动到顶部，可以通过 to参数进行区分判断。
5、点击导航，页面内滚动到对应的锚点
关于这个问题，最开始考虑使用scrollIntoView方法
const goIntoView = (id) => {
let Id = '#' + id
document.querySelector(Id).scrollIntoView({
behavior: 'smooth',
block: "center",
inline: 'nearest'
})
}
在普通的页面上，这种方法是很实用的，会实现一个很平滑的滚动效果，同时还可以控制滚动位置是在页面中部，还是在顶部或者底部。但是如果，页面上存在fix定位的导航栏，这个方法就会出现问题了，因为scrollIntoView是默认滚动到页面顶部，不会关注是否有遮挡，这就会导致滚动顶部的内容会被遮挡一部分，此时我们只有放弃这个方法，直接通过offsetTop去设置滚动的位置。
const goIntoView = (id) => {
// 此处减去的数值即为fixed元素的高度
document.documentElement.scrollTop = document.getElementById(id).offsetTop - 162
}
6、JSON数据如何在页面上格式化展示
这个问题也是之前没有遇到过的，需求很简单，就是一段json格式的数据，现在要格式化的展现在页面上。最开始想到的就是用code或者pre标签去承载内容，虽然能够展示内容，但是内容并没有格式化展示，看上去效果并不好，通过度娘，找到了最简易的方法，可以通过JSON.stringify进行格式化处理，再使用pre去接收数据即可。
JSON.stringify({
"code": "200",
"msg": "权益校验通过"
}, null, 4)
这里简单说下JSON.stringify方法的三个参数，分别为object,Array|function,number|string。
第一个参数为 object，即传入的对象，可以把对象转换为json格式
第二个参数可以为数组或者函数，可以用来过滤传入的对象，返回指定的过滤后对象
第三个参数可以使数值或者字符串，当为数值的时候，表示格式化时的缩进时的空格数，最小为1最大为10；当传入字符串的时候，即是把缩进的空格换成了对应的字符串。
7、关于echarts使用问题
这里我使用的echarts版本号是5.3.3,不同的版本配置上可能有差异。关于基本的使用方法，官网说的很清楚了，只不过要注意的是，当使用按需引入的时候需要把展示的内容组件都引入进去。
如本次遇到的问题，按需引入之后，发现没有展示图例内容，这时候需要把LegendComponent引入，并添加到echarts.use里边。
还有另外一个问题，就是页面上存在多个图标内容时，可能会抛出错误There is a chart instance already initialize on the dom，大概意思就是图表实例已经存在了，此时我们可以使用echarts.getInstanceByDom判断对应的图表是否已经存在，不存在的时候我们再去创建实例。
let echart = echarts.getInstanceByDom(document.getElementById(id))
if(echart == null){
echart = echarts.init(document.getElementById(id));
}
8、element-plus table修改个别表格文字颜色和表头颜色
这个问题可以通过查文档解决，文档里给了对应的方法：
修改表格文字颜色可以使用cell-style方法，通过行列和行列所在的index去判断。
同样修改表格头，可以使用header-row-style方法。但是通过实践发现，这个方法并不生效 （具体原因不明，希望知道的大佬评论区给出回复） 。弥补方法是通过header-cell-style进行设置，可以达到期望效果。
以上就是一个切图仔遇到的乱七八糟的问题，仅此记录，并考虑后续把这种开发中遇到的各种问题做成一个杂项系列吧，不管问题简单与否，记录下来后续方便自己查阅，毕竟有些问题解决完了再次遇到还是会不明缘由~
