JavaScript
JavaScript
xxxxxue
快乐的小码农
展开
-
antd DatePicker 日期 与 时间 分开选择
【代码】antd DatePicker 日期 与 时间 分开选择。原创 2024-06-09 16:33:01 · 263 阅读 · 0 评论 -
bun 换源 国内阿里源 npmmirror 加速下载
很多 windows 用户可能会看不懂这个变量指的是哪里.官方文档也没有来得及补充太多关于 windows 的配置。估计是 bun 1.1 才支持的 windows.powershell 更高级一些, 支持。在 windows 上 home 变量。所以全局换源就是在这个路径下创建一个。输出后发现, 是 当前用户 的文件夹。( 一定要注意文件名前面有一个。单个项目的换源直接在根目录创建。写的还是类 Unix 系统的。原创 2024-04-28 15:02:47 · 3398 阅读 · 0 评论 -
js 小数精确计算 (mathjs / decimal.js)
mathjs 底层是 decimal.js。原创 2024-01-20 22:32:34 · 884 阅读 · 0 评论 -
solidjs 中方便的修改对象与数组的值
solidjs 中有一个第三方的包.封装了 createSignal 与 Immer , 提供了更好的 ts 类型 与 智能提示。众所周知, React 想方便的修改 useState 中的对象或数组, 需要使用第三方库。那 solidjs 官方提供了一个 与 immer 同名的 produce 方法,immer 官方直接支持 React, 类型与智能提示都很不错,如果你用的 createSignal, 请使用。如果你使用的是 createStore,直接使用无需安装第三方包,(有更好的ts支持)原创 2024-01-20 16:59:33 · 464 阅读 · 0 评论 -
solidjs 中 createEffect 监听指定的 Signal
React 的 useEffect 只需指定依赖数组Vue3 的 watch 可以指定在 Solidjs 中默认 createEffect 是监听函数中所有使用到的 Signal,只要任意一个改变都会触发 createEffect ,使用 on 方法,可以指定监听的 Signal ,其他的改变,不会触发 createEffect单个直接传入 (不用 小括号)多个使用数组格式函数参数中可以接收新值与旧值stringstring传入 defer 参数, 可以使第一次不执行内部的逻辑。原创 2024-01-20 16:53:30 · 487 阅读 · 0 评论 -
solid.js 虚拟列表/表格
使用 react 来做一些复杂的虚拟列表/表格, 还是可以感觉到掉帧, 也不平滑.换成 solidjs 重新实现一遍功能. 非常的丝滑, 不愧是 性能接近原生js 的框架👍👍👍👍传入自己的 array 数据, 并设置大概的 item 高度虚拟表格, 两个 div 中放入 table , 在 tbody 中 循环显示 tr 即可普通的列表, 则省略 table。原创 2023-10-05 11:50:38 · 279 阅读 · 0 评论 -
nodejs 读写 ini
需要提前安装node-gypnode-gyp只要有对应版本的 python 与 c++ 环境, 应该就没啥问题了.原创 2023-08-06 19:12:19 · 632 阅读 · 0 评论 -
vite build 时 import { Button } from “XXX“ 变成了 import Button from “XXX/es/button“, 组件库没有es文件夹,导致报错
遇到这个bug ,大概率是 某个插件改变了代码我用的是, 可以分析导入, 自动引入 css插件中有个属性💣💥💥💥💣💥💥💥true: 会把变为: 保持原状。原创 2023-08-03 17:56:09 · 259 阅读 · 0 评论 -
vite 生成 TypeScript 的类型定义( d.ts )
【代码】vite 生成 TypeScript 的类型定义( d.ts )原创 2023-08-03 17:20:13 · 1980 阅读 · 0 评论 -
nodejs 控制台 监听一个按键 (不用按回车键即可执行)
【代码】nodejs 控制台 监听一个按键 (不用按回车键即可执行)原创 2023-06-15 17:58:31 · 661 阅读 · 0 评论 -
React.js 实现 KeepAlive ( 使用 display:none)
react.js 使用 display 实现 keepalive 的效果原创 2023-04-18 19:44:33 · 271 阅读 · 0 评论 -
vite-plugin-pwa 将自己的图片/文件添加到 sw.js 的 precacheAndRoute 中
【代码】vite-plugin-pwa 将自己的图片/文件添加到 sw.js 的 precacheAndRoute 中。原创 2023-02-04 20:03:39 · 629 阅读 · 0 评论 -
moment / dayjs 计算时间差( 距过去或未来某个时间点的差值) ( 年,月,日,时,钟,秒)
如果是用的 moment , 把 dayjs () 替换成 moment() 就可以了.两个库是兼容的原创 2023-01-28 15:35:56 · 2424 阅读 · 0 评论 -
dayjs 使用 updateLocale 补充缺少的中文 ( 使用 calendar 举例)
【代码】dayjs 使用 updateLocale 补充缺少的中文 ( 使用 calendar 举例)原创 2022-11-26 16:32:03 · 1346 阅读 · 0 评论 -
在 html 文件中写 react ( es module + babel )
html + react + es module + babel + cdn原创 2022-11-22 16:54:26 · 627 阅读 · 0 评论 -
使用 Next.js 和 React Router 构建单页应用程序(SPA)
Building a single-page application with Next.js and React Router使用 Next.js 和 React Router 构建单页应用程序(SPA)原创 2022-10-28 21:38:29 · 2405 阅读 · 0 评论 -
umi pro-layout : 某个页面 禁用/移除 pro-layout ( 比如: 登录页不需要 layout )
umi 开启 layout 后, 会把所有页面都放在 pro layout 中.但是 `登录页 或 其他一些页面` 是不需要这个 layout 的. 可以通过菜单中的 `layout:false` 属性关闭这个当前路由的 layout可以通过菜单中的 属性关闭这个当前路由的 layout例子:截图umi 的配置附赠一个路由的 TypeScript 类型可能不全, 具体的可以看官方的文档… 自己再补一些.原创 2022-10-21 21:03:14 · 2462 阅读 · 0 评论 -
使用 Vite + 前端框架 (SolidJs,React,Svelte,Vue) 来开发 油猴脚本
本文使用SolidJs举例, 你也可以使用其他的框架Solid 拥有 React TypeScript 的开发体验, 还解决了 React 的缺点还可以编译为 原生JS 体积非常的小, 还拥有 原生 JS 一样的性能.原创 2022-09-20 22:58:56 · 1915 阅读 · 0 评论 -
vite 配置 @ 路径别名
【代码】vite 配置 @ 路径别名。原创 2022-09-10 20:11:09 · 839 阅读 · 0 评论 -
CSS 渐变彩色字体
【代码】CSS 渐变彩色字体。原创 2022-09-05 18:51:04 · 879 阅读 · 0 评论 -
轮播图 或 其他组件 把 页面 宽度 撑得很大的 bug
当布局有很多层 div 后, 有一些关键的 div 忘了指定宽度 100% 或 数值 , 就会导致整个页面的宽度被内部的某些元素撑爆的 bug此时 新建一个 空页面, 把相关代码搞过来测试下, 宽度正常. 就说明你遇到这个这个bug。原创 2022-09-05 16:37:04 · 459 阅读 · 0 评论 -
React 封装 SVG 图标
放到组件中, 格式化一下代码。删除多余的标签,只留下 path 即可。原创 2022-09-03 20:01:22 · 672 阅读 · 0 评论 -
React 快速配置 ESLint
- `eslint` - `eslint-config-next` - ( Next.js 的 eslint 配置包,非常的不错,不用自己手动配置了 - 可以用在所有的 React 项目中,比如 CRA , Umi.js , 等等)- VSCode 安装`ESLint` 和 `Error Lins` 插件原创 2022-08-31 11:04:50 · 606 阅读 · 0 评论 -
Js对象数组 按照规定的顺序进行排序
javascript 对象数组 按照给定的顺序 排序原创 2022-07-05 17:42:58 · 1507 阅读 · 0 评论 -
Tailwind 导致 antd 的 button icon svg 不居中的 bug
github issues 地址图中可以看到 图标靠下了.(其他地方的 icon 其实都靠下 , 这里用 button 来举例)在你的 css 中添加css 覆盖掉tw默认的值原创 2022-06-06 22:04:27 · 2305 阅读 · 0 评论 -
React 中 Twitter 的 SVG 图标 (icons)
react 封装好的 twitter 图标. 可以直接调用, 传入 ClassName 改变颜色、大小 等原创 2022-06-06 15:32:30 · 508 阅读 · 0 评论 -
React Solidjs 的 JSX 次数循环, 计次循环, 比如: 循环100遍
核心代码[...new Array(50)][...new Array(props.count)]例子let App = function () { return ( <> {[...new Array(50)].map(() => { return <p> Hello jsx </p>; })} {[...new Array(50)].map(() =>原创 2022-05-28 18:47:45 · 948 阅读 · 1 评论 -
React Hooks forwardRef useImperativeHandle TypeScript类型 最佳实践
定义官网文档forwardRef : 转发 refuseImperativeHandle : 用于自定义暴露给父组件的实例值版本"react": "^17.0.2""@types/react": "^17.0.44"代码父组件import { FC, useEffect, useRef } from 'react';// 导入子组件import ChildComponent, { IRefProps } from './ChildComponent';let MyConpon原创 2022-05-07 19:26:57 · 1414 阅读 · 0 评论 -
React 在 styled-components 中使用 TailwindCss
编译 Styled-Components 中的 @apply将 tailwind 编译为 普通css支持 windi 与 tailwindVite : https://github.com/JiangWeixian/vite-plugin-styled-windicssBabel : https://github.com/JiangWeixian/babel-plugin-styled-windicss官方 VsCode插件中设置(配置的灵感来源于tailwind-styled-components)原创 2022-04-21 13:36:27 · 1869 阅读 · 0 评论 -
React Umi SSR SSG 使用TypeScript的最佳实践
说明Umi文档对TypeScript 只字未提 (太糟糕了, 感觉像是 KPI 项目),所以只能自己看源码 和 Github 去捞TS的定义最终封装为一个类型IUmiPage使用的时候只需要指定 两个泛型 ( 路由参数类型 与 getInitialProps 返回值 )不指定,则默认{ }空对象版本"umi": "^3.5.21"代码核心type不开启SSR SSG , IGetInitialProps会找不到, 所以加上 @ts-ignore//@ts-ignoreimpo原创 2022-03-29 18:48:02 · 4254 阅读 · 0 评论 -
CSS 隐藏滚动条 / 美化滚动条
代码隐藏滚动条直接使用 hideScrollbar 即可.hideScrollbar::-webkit-scrollbar { display: none; /* Chrome Safari */ }.hideScrollbar { scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ overflow-x: hidden; overflow-y: auto;原创 2022-03-20 17:16:55 · 1023 阅读 · 0 评论 -
React Antd4 CRA / Next.js / Vite 按需加载组件的 CSS / Less
在 Create React App (CRA) / Next.js / Vite 中配置 ant design 的按需加载 CSS / Less。antd less 变量修改原创 2022-03-14 14:16:44 · 2591 阅读 · 0 评论 -
React Next.js antd 首屏闪烁,样式不稳定的bug
说明Next.js + Ant Design 的html渲染后,各种css样式会经历从无到有的一个过程.造成了闪烁的感觉, 体验很差.解决方案https://github.com/ant-design/ant-design/issues/16037原创 2022-03-14 13:57:19 · 3379 阅读 · 0 评论 -
React styled-components TypeScript 的最佳实践
styled-components + TypeScript需要安装 @typesyarn add -D @types/styled-components详细说明原生dom使用 styled.div , styled.h1Button 是 antd 的按钮IMyButtonProps 是props的ts类型定义,attrs需要指定一次, 普通css开头也需要指定一次attrs 是 设置属性一般用来封装通用的属性, 不通用的就在jsx中直接传入,可以直接传入对象,也可以原创 2022-03-13 15:45:18 · 1921 阅读 · 0 评论 -
React Next.js Ant Design antd 报错: Warning: Prop `className` did not match. Server:....
React + Next.js + Ant Design (antd)浏览器console报错信息:Warning: Prop `className` did not match. Server: "anticon anticon-user ant-menu-item-icon" Client: "anticon anticon-user -item-icon"问题分析导入的方式不同, 不共享上下文import { Menu } from 'antd'; // 这样导入 会报错这个错误原创 2022-03-12 22:38:08 · 1975 阅读 · 0 评论 -
React Next.js styled-components 报错: Warning: Prop `className` did not match. Server:...
React + Next.js + StyledComponents浏览器console报错信息:Warning: Prop `className` did not match. Server: "sc-gsDKAQ WHHak" Client: "sc-bdvvtL fKlryF"大概就是 (hydrate) 水合注水失败了, 虽然是个 warning , 但 界面却是不正常的. 这个警告必须解决.解决方案Next.js 12.1next.config.js在compiler中添加sty原创 2022-03-12 22:15:08 · 2654 阅读 · 0 评论 -
JS JQuery 操作: Json转 Excel 下载文件
方法的调用 var json = '[' + '{&quot;申请流水号&quot;:&quot;123456&quot;,&quot;保险公司&quot;:&quot;测试数据&quot;,&quot;发票抬头&q原创 2018-06-14 14:53:04 · 2361 阅读 · 0 评论 -
LocalStorage 的 具体操作 与 设置有效期
读取与存储 的使用方法 //存储 (名称 , 内容 , 有效期&lt;天&gt; ) // 如果想要自己改变 有效期的单位 可以在 set 方法中 // 找到 这两个 setHours getHours 修改成 对应的 单位即可 // 具体单位 请 参考 http://www.w3school.com.cn/js/jsref_obj_date.asp jsHelper.lo...原创 2019-03-01 17:48:01 · 539 阅读 · 0 评论