要实现强制分为指定段数，并且对齐刻度，需要用的配置分别为yAxis的max、min、interval
echarts5.3有个配置项alignTicks，在多个 y 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对 'value'和[cr[……]
env(safe-area-inset-bottom) 兼容写法
@supports 兼容性很好，所以使用 @supports 做兼容是个不错的选择。
例：
|
1 2 3 4 5 6 |
@supports (padding-bottom: env(safe-area-inset-bottom)) or (padding-bottom: constant(safe-area-inset-bottom)) { .your-dom { padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ } } |
|
1 2 3 4 5 6 7 8 |
@supports not ( (padding-bottom: env(safe-area-inset-bottom)) or (padding-bottom: constant(safe-area-inset-bottom)) ) { .your-dom { padding-bottom: 20px; } } |
缩放实现0.5px
一、
|
1 2 3 4 5 6 7 8 9 10 11 12 |
&::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: -50%; right: -50%; border: 1px solid #e9e9e9; border-radius: 2px; -webkit-transform: scale(0.5); transform: scale(0.5); } |
二、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
&::after { content: ""; position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform-origin: 0 0; border-width: 1px; border-style: solid; border-radius: 50%; -webkit-transform: scale(0.5); transform: scale(0.5); box-sizing: border-box; } |
禁止 IOS 橡皮筋效果
方法一：
首先，在拖动 div 时，判断当前容器 div 是否有滚动条，如果没有，则禁止整个 div 拖动，例：
|
1 2 3 4 5 6 |
const list_dom: any = document.querySelector(".list"); list_dom.addEventListener("touchmove",(ev) => { if (list_dom.scrollHeight <= list_dom.clientHeight &&list_dom.offsetHeight <= list_dom.clientHeight) { ev.preventDefault(); } },{ passive: false }); |
注：上述方法仅适用于 div 内没有其他内容滚动情形！如果内层有其他[……]
JS 拦截浏览器返回
|
1 2 3 4 5 |
history.pushState(null, null, document.URL) window.addEventListener('popstate',() => { history.pushState(null, null, document.URL) // TODO somthing },false) |
注：需要先点击页面进行交互，方法方可生效
海康威视DS-IPC-E42H-IWPT监控画面竖线处理
升级包下载: https://pan.baidu.com/s/1TLG7m9BjUGPw4wMAoPYSdw?pwd=w4ih
提取码: w4ih
网页升级方法：
提醒：升级有风险，设备升级过程中请勿断电！设备固件升级后可能会出现参数恢复默认的情况。
操作步骤
步骤一：.固[……]
Echarts 5 动态按需引入图表
官网提供的按需引入方法为全量按需引入，在打包分离中，仍旧存在使用不到的图表被打包进去。
例如：组件A使用了折线图、柱状图，组件B只用到了折线图，但是打包组件B的时候，柱状图也会被打包进去。
本文提供一种动态按需引入的思路，使得只用到折线图的组件B，打包的时候只打包折线图，不会将组件A用到[……]
React 18 自定义 Hook 获取 useState 最新值
原理：通过同步更新 useRef 来获取最新值
|
1 2 3 4 5 6 7 8 9 10 11 |
// util.ts export const useRefState = (init: any = null) => { const [state, setState] = useState(init); const stateRef = useRef(init); const setProxy = (newVal: any) => { stateRef.current = newVal; setState(newVal); }; const getState = () => stateRef.current; return [state, setProxy, getState]; }; |
使用：
|
1 2 3 4 5 6 7 |
import { useRefState } from "util" const [state, setState, getState] = useRefState(0) state // state 值，变动后更新DOM setState // setState，变动 state getState() // 获取最新值 |
处理报错 ResizeObserver loop completed with undelivered notifications.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// 处理报错 ResizeObserver loop completed with undelivered notifications. export const handlerResizeObserverError = () => { const debounce = (callback: (...args: any[]) => void, delay: number) => { let tid: any; return function (...args: any[]) { const ctx = self; tid && clearTimeout(tid); tid = setTimeout(() => { callback.apply(ctx, args) }, delay) } } const _ = (window as any).ResizeObserver; (window as any).ResizeObserver = class ResizeObserver extends _ { constructor(callback: (...args: any[]) => void) { callback = debounce(callback, 20) super(callback) } } } |
Mac版Sublime Text 4152 激活
- Sublime Text下载地址：Download – Sublime Text
- 破解工具“Hex Fiend”下载地址：Hex Fiend, a fast and clever hex editor for macOS
- 打开Hex Fiend -> File ->[……]