首页 前端知识 前端开发-异常问题记录

前端开发-异常问题记录

2024-10-27 22:10:01 前端知识 前端哥 580 991 我要收藏

Q1:Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示;

可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决

Q2:浏览器跨域问题(通过配置浏览器解决)

将chrome浏览器复制一个进行修改,修改完后,重新打开复制的浏览器

1、版本号49之前的跨域设置

      • 右键点击谷歌浏览器,选择属性
      • 在目标输入框尾部加上 --disable-web-security

2、版本号49之后的跨域设置

      • 在电脑上新建一个目录(任意位置) 例如 C:\dev
      • 右键点击谷歌浏览器,选择属性
      • 在目标输入框尾部加上 --disable-web-security --user-data-dir=C:\dev

Q3:echarts 图表,tooltip被容器遮挡,显示不全

confine:true // 限制tootip在容器内

tooltip: {
	trigger: 'axis',
  axisPointer: {
    type: 'shadow'
  },
  backgroundColor: '#fff',
  borderColor: 'none',
  extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 附加阴影样式
  textStyle: {
    color: '#53565C'
  },
  confine: true     //限制tootip在容器内
},

Q4:Vue2动态路由导致第一次进入出现白屏问题

vue-router4版本第一次打开界面不匹配路由问题_router匹配不到路由_天外飞鲜橙子哥的博客-CSDN博客

1、删除通配符

{
  path: "*",
  redirect: "/",
}

2、在全局路由守卫添加拦截

next({ ...to, replace: true })
router.addRoute(autoRouter)

Q5:元素拖动,滚动条跟随改变

let scrollContainer = document.querySelector(".scrollContainer");
let dragContainer = document.querySelector(".dragContainer");
dragContainer.onmousedown = e => {
    //鼠标按下那一刻,滚动条的位置
    let mouseDownScrollPosition = {
        scrollLeft: scrollContainer.scrollLeft,
        scrollTop: scrollContainer.scrollTop
    };
    //鼠标按下的位置坐标
    let mouseDownPoint = {
        x: e.clientX,
        y: e.clientY
    };
    dragContainer.onmousemove = e => {
        //鼠标滑动的实时距离
        let dragMoveDiff = {
            x: mouseDownPoint.x - e.clientX,
            y: mouseDownPoint.y - e.clientY
        };
        scrollContainer.scrollLeft = mouseDownScrollPosition.scrollLeft + dragMoveDiff.x;
        scrollContainer.scrollTop = mouseDownScrollPosition.scrollTop + dragMoveDiff.y;
    };
    document.onmouseup = e => {
        dragContainer.onmousemove = null;
        document.onmouseup = null;
    };

};

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19260.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!