Front-end development - exception record

Q1: By default, the Chrome Chinese interface will force text smaller than 12px to be displayed at 12px;

Can -webkit-text-size-adjust: none; be solved

Q2: Browser cross-domain problem (solved by configuring the browser)

Copy one of the chrome browsers for modification. After modification, reopen the copied browser

1. Cross-domain settings before version 49

• • • Right click on Google Chrome, select Properties
    • Add at the end of the target input box --disable-web-security

2. Cross-domain settings after version 49

• • • Create a new directory on your computer (anywhere) For exampleC:\dev
    • Right click on Google Chrome, select Properties
    • Add at the end of the target input box --disable-web-security --user-data-dir=C:\dev

Q3: The echarts chart, the tooltip is blocked by the container, and the display is incomplete

confine:true // limit tootip in the container

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 dynamic routing leads to a white screen problem when entering for the first time

Vue-router4 version opens the interface for the first time does not match the routing problem_router can not match the route_Tianwaifeixianchengzige's Blog-CSDN Blog

1. Delete wildcards

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

2. Add interception to the global route guard

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

Q5: Drag the element, the scroll bar changes accordingly

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;
    };

};