weixin_40795574的博客

本文介绍了如何在浏览器中实现。

部分浏览器视频脱离文档流，滚动时，视频是悬浮出来，在顶部播放。

扇形的实现方式

creat-react-app 多入口文件打包

移动端键盘唤醒时 antd Modal 和 position: fixed； bottom: 0； 吸底按钮的处理方案

lint tsc 跳过 node_modules

问题在 chrome 中使用 lighthouse 跑分的时候发现有比较高风险的漏洞，从 lightHouse 建议 入手研究了一番前言定义：CSP（ Content-Security-Policy ）从字面意思来讲是“内容 - 安全 - 政策”。解释：通俗的讲就是该网页内容的一个安全策略，可以自定义资源的加载规则和资源所在地址源的白名单，用来限制资源是否被允许加载，即当受到 XSS 攻击时，攻击的资源文件所在的地址源不满足 CSP 配置的规则，即攻击资源会加载失败，以此达到防止 XSS 攻击的

现象Form 配合 Modal 使用时 destroyOnClose 会影响 useEffect 的执行，相应的 useEffect 中的一些操作如 resetFields 可能会不生效原因有 destroyOnClose 先执行 useEffect，没有 destroyOnClose 后执行 useEffect复现示例demo代码import React, { useState, useEffect } from 'react';import ReactDOM from 'react-do

Antd Form onFinish 提交时 setState 非批量执行（batch update）参考 issue复现示例import React, { useState, useEffect } from 'react';import ReactDOM from 'react-dom';import 'antd/dist/antd.css';import './index.css';import { Button, Form } from 'antd';const useSearc

Antd Form表单使用 Upload 上传 FormData 数据文件至后端Upload 通过 beforeUpload 拦截const normFile = (e: any) => { return e?.fileList;};const handleFinish = (value: any) => { const { file } = value; const formData = new FormData(); file.forEach((it

官方说明步骤ctrl + shift + alt + d 组合按键开启调试，如下图所示左下角可以找到 debug 窗口搜索小程序打开小程序可以看到 vConsole点击即可进入调试

antd table 使用的列使用 ellipsis: true 自动省略属性 + Tooltip 导致位置弹窗错位复现示例具体现象使用 antd 的 table 的 ellipsis: true 实现自动省略展示内容由于被省略需要通过 tooltip 查看全部tooltip 并不在对应列的统一位置上，而是根据长度不同位置不同，导致出现在其他列上的现象问题原因使用 ellipsis: true 时，列中 span 的宽度为实际宽度只是视觉上进行的省略操作，导致 tooltip 按照上述

vscode 插件指南1. 添加子菜单最终效果相关 issue代码配置2. 使用 when 时相关关键字逻辑操作符关键字（太多了，截图只是一部分，详情看看官方链接）3. 设置 vscode setting 配置配置使用1. 添加子菜单最终效果相关 issue10172 和 9827代码配置explorerResourceIsFolder 代表该菜单仅在文件夹右键时展示config.fileTemplate.ts.active 代表读取本地 setting 中的配置，true 时展示/

前端好用的第三方功能库npm 地址pixelmatch 图片对比库最小、最简单和最快的JavaScript像素级图像比较库，最初创建用于在测试中比较屏幕截图。react-viewer 图片拖动、放大、缩小展示库husky 代码提交的钩子函数(yorkie 是基于 husky 封装的一个)nanoid、uuid 随机唯一 idlint-staged "gitHooks": { "pre-commit": "lint-staged" }, "lint-stage

iconfont.cn 选择图标生成 scriptUrl 链接iconfont.cn 地址：https://www.iconfont.cn/，登录啥的就不多说了，没账号的自己注册一个首先新建一个项目，在资源管理，我的项目中然后点击右侧的文件夹，新建项目（这里不太好的是鼠标放上去没有功能提示，不知道每个按钮是干嘛用的） 然后输入所要求的内容就行，这个时候项目就新建完成了然后在图表库中搜索你需要的图标，鼠标悬浮上去的时候回弹出操作栏，点击购物车这个按钮，将图标添加入库选好所需

antdv4 Icon 的使用正常使用，按需导入这个就不多说了，需要单独从@ant-design/icons导入，官方都是例子，例如import { MenuUnfoldOutlined } from '@ant-design/icons';<MenuUnfoldOutlined />类型可变，动态设置主要是想说一下提前不知道需要哪个图标，type 是存在后端或者配置文件中的使用场景，这个时候前端没办法知道需要导入哪些图标比如这样的场景，菜单栏的图表是路由表中配置的route

1、Unexpected lexical declaration in case block正如字面意思一样:case块中意外的词法声明，是一个eslint(no-case-declarations)的报错例如：下面代码就会报错switch (name) { case 'zhangsan': const tem = '张三' break; case 'Search': const tem = '李四' break; default： break;解决办法：两种添加块级

自定义组件仅需要支持标准的 onChange 和 value 即可本例子采用 formily + antd + react 实现sandbox参考例子// Form 部分import React from "react";import ReactDOM from "react-dom";import { SchemaForm, SchemaMarkupField as Field, FormButtonGroup, Submit} from "@formily/antd";i

在 umi 中设置 immer:true 后使用 formily 报错问题解决解决办法使用 npm install 或者 yarn add 在 node_modules 目录下安装高版本 immer，使 node_modules 目录下的 immer是高版本的即可需要知道的前置知识umi2 的 umi-plugin-react 插件设置 immer:true 即开启 umi 内置 immer ，可以更好地操作 reducerformily 使用了 immer ，且使用了 enableAllPl

display：none visibility：hidden opacity:0 回流 是 否 否 重绘 是 是 不一定 是否存在 否 是 是 是否占空间 否 是 是 子元素能否设置显示 否 可以 不可以 绑定事件 否 不可以 可以 ...