1.通过js动态修改容器滚动条的样式 1.创建style标签
const styleDom = document.createElement('style')
styleDom.type = 'text/css'
styleDom.lang = 'scss'
styleDom.id = dom.id
2.设置innerHTML
styleDom.innerHTML = `
/* 定义滚动条样式 */
.${想要出现滚动条容器的类名}::-webkit-scrollbar {
width: 100% !important;
height: ${scrollBarSize}px !important;
background-color: rgba(31, 65, 99, 0) !important;
}
/*定义滚动条轨道 内阴影+圆角*/
.${想要出现滚动条容器的类名}::-webkit-scrollbar-track {
box-shadow: inset 0 0 0 rgba(240, 240, 240, .5);
border-radius: 0.1rem;
background-color: ${getHexOpacityColor({ color: scrollBarTrackColor, opacity: (scrollBarTrackOpacity || 0) / 100 })};
}
/*定义滑块 内阴影+圆角*/
.${想要出现滚动条容器的类名}::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 rgba(240, 240, 240, .5);
background-color: ${this.getHexOpacityColor({ color: scrollBarSliderColor, opacity: (scrollBarSliderOpacity || 0) / 100 })};
}
3.将标签添加进body中,给想要出现滚动条的元素添加对应类名
document.querySelector('body').appendChild(styleDom)
// 给dom添加滚动条
dom.classList.add('想要出现滚动条容器的类名')
2.vue中引入public中的变量
1.在public中新建js文件
js中可以使用变量，也可以使用window来挂载
注意：
index.html在引入js时，js前面一定要加上/ ，否则子路由菜单刷新会报错，提示找不到js文件 如果引入js后，在template模板中使用config对象发现报错，那么可以在mounted中打印一下（应该可以打印出来），并赋值给data中的某个属性
3.vue项目中图片资源放在public还是assets中
要回答这些问题，首先，我们来了解一下public和assets文件夹：
public
public 目录下存放项目需要使用的静态资源，有更新动态显示的需求。
任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack，需要通过绝对路径来引用它们。
路径设置时无需添加 public/，默认加载 public 文件夹下的图片。
不需要使用 require，否则就变成在 src/assets 文件夹寻找。
系统编译后，可替换图片；
assets
assets 目录下存放适合存放项目中所必须的图标，属于代码的一部分，只支持相对路径形式。
会通过 webpack 处理的脚本和样式表会被压缩且打包在一起，可以避免额外的网络请求。
需要使用 require，运行时就加载；
系统编译后，不能替换，因为被内部编译管理；
了解完public和assets文件夹，这些问题其实都有了答案。
public和assets文件夹的区别？
public文件夹下的图片等静态资源，不经过 webpack，通过绝对路径来引用，系统编译后，可替换；
assets文件夹下的图片等静态资源，经过 webpack，通过绝相对路径引用，系统编译后，不能替换；
3.如何克隆echarts图表
1.通过cloneNode 将对应的echarts图表节点克隆下来
2.修改克隆的节点的id和_echarts_instance_属性
3.重新调用 setOption
copyDom = echartsDom.cloneNode(true) // 克隆节点
copyDom.removeAttribute('_echarts_instance_')
copyDom.id = 'xxx'
var obj = echarts.init(copyDom) // 重新初始化容器
obj.setOption(options) // 重新绘制
4.echarts源码中如果未给容器绝对定位,则会默认给其一个position: relative
