中科开发记录

1、 flex布局子元素不设高度时会继承父元素的高度，造成子元素高度撑开（图片拉伸问题）

2、返回顶部按钮

• 兼容问题。 解决： 用以下两种方式
  • document.documentElement.scrollTop
  • document.body.scrollTop
• 返回顶部
  • 点击其他地方内容隐藏
    • node.contains(targer) node为最外层节点，target为事件源节点，target在node内函数返回true,反之则false

3、 场景： 设计稿为1920px的一个模块,里面的文字为12px,由于浏览器字体最小只能显示12px,rem适配时其他地方缩小，但是字体不缩小造成布局错乱问题。

解决：

 window.addEventListener("resize", (e) => {
        this.percentage = document.body.clientWidth / 1920;
        courseId.style.transform = `translate(-50%,-50%) scale(${this.percentage})`;
      });

js动态计算scale的值进行缩放

4、锚链接在部分浏览器第一次进入页面不跳转问题

原因： vue中第一次进入页面会设置滚动等于0（顶部）

解决：

  handlescroll() {
     const hash = location.hash;
        if (hash) {
           const id = hash.split('#')[1];
           const ele = document.querySelector(`#${id}`)
           ele && ele.scrollIntoView(true)
         }
       },

进入页面后获取到页面地址 格式大致为： xxxx.html/#node

node为当前页面要跳转的模块的id

ele.scrollIntoView(true) //参数为true跳到当前模块。

5、跳转到新页面并打开新页面（js）

const newf = this.$router.resolve({ path });
window.open(newf.href, "_blank");

newf拿到要跳转的路径及参数，_blank打开新页面

6、动态图片

引入图片方式用变量的方式,否则会找不到图片路径

requir（‘xxxx.png’）;

7、 动态监听设备宽度：onrisize 事件监听window.clientWidth 从而动态改变移动端和pc端的一些变量（如：图片路径，样式的大小等）

8、nuxt框架的根组件为 /layouts/default.vue 文件

page文件下的所有的页面都相当于根组件的子组件

/layouts/default.vue 文件的作用

• 写公共的样式（也可以写在assets文件夹下），
• 写公共js代码,如： 百度统计、监听锚链接（上面提到锚链接第一次不跳转，统一在这处理

404页面

/layouts/error.vue 文件的作用

• 所有不符合的路径都进入这里404页面，vue传统是在router配置下设置

9、 页面文字较多时写在.vue文件下造成阅读困难问题

添加一个mock文件夹，在里面统一管理

10、

动态改变导航地址（不刷新）

window.history.pushState({}, 0, window.location.href.split('?')[0])

window.location.href.split('?')[0]，将地址以？拆分取前面的部分