分类下相关文章
2024-11-22 · 阅读 223 · 字数 1068
这是一个无比诡异的 Quill 富文本编辑器组件的 bug,浪费了我周四整整一个下午。 唯一的收获是,把早已忘光的 React 组件封装,及组件通信的机制复习了一遍。 bug 现象 在一个 Ant Design Pro 写的后台操作界面中,在弹出的 Modal 组件中,内嵌一个 React Quill 的富文本编辑器组件。 进行内容编辑,输入 hello 换行,再换行,输入 world。保存。 再次打开 Modal,里面 Quill 展示的内容,会看到中间的换行不见了。。。 再次重复上面操作,hello world 直接变为了一行。 继续测试,会看到不单是换行,连列表样式也会消失。 排除服务器 ...
2024-11-21 · 阅读 280 · 字数 318
作为一个 CRUD boy,经常要新建管理后台的项目。确切的说,应该是经常要 ctrl c / ctrl v 来 copy 老的项目。 但是 ant design pro 好多配置不在一个统一的配置文件中,需要去多个地方修改设置。例如: 顶部标题 登录页的标题 logo 顶部,及登录页 到处找配置,非常浪费脑细胞,本已稀疏的头发也经受不住这么折腾。所以还是能统一管理比较好。 统一配置文件在哪里 config/defaultSettings.ts 虽然这里定义了一些配置。但是像登录页的标题就不受这里控制。 登录页使用配置文件中的标题 import defaultSettings from ' ...
2024-10-17 · 阅读 287 · 字数 368
AutoComplete: 支持输入的 ant design select 组件 参考: https://ant-design.antgroup.com/components/auto-complete-cn 实际上,我需要的并不是一个 select 组件,而是一个自动补全组件。 因为,select 组件并不支持自定义输入。而 AutoComplete 组件完美契合需求。 其数据结构是: const options = [ { value: 'name1' }, { value: 'name2' }, { value: 'name3' }, ]; 是否可以默认展开选型列表: d ...
2024-10-11 · 阅读 316 · 字数 210
使用 Antd Pro 实现了一个报价单批量查询的功能。 我想将 react 前端 table 组件的批量查询结果导出为 Excel 文件并下载。 这个不方便用后台接口实现,因为批量查询是通过多次的异步调用接口实现的。 后台并没有对应的一次性导出接口。 所以考虑采用前端实现的方案。 安装依赖 yarn add react-html-table-to-excel react 代码 import ReactHTMLTableToExcel from 'react-html-table-to-excel'; const QuotationSearch: React.FC = () => { ...
2024-09-28 · 阅读 394 · 字数 535
使用场景 在实现一个批量查询的功能,前端使用 React 写了一个组件。 将多行输入分隔成多个搜索词,因为是模糊查询,搜索速度不快, 为了减少等待时间,于是每个搜索词逐一调用搜索接口。 然后,将搜索结果合并到一个数组,每返回一个结果,就立即显示。 有问题的代码 const [results, setResults] = useState<API.Item[]>([]); for (const keyword of keywords) { // 每个搜索词逐一调用搜索接口 let apiResult = await callSearchApi({keyword: keyword ...
2023-10-20 · 阅读 2611 · 字数 276
发现默认安装的 react markdown 组件不支持 table 表格的渲染。 在官方文档里查了一下,需要安装额外的组件 remark-gfm 来支持 table 渲染。 安装 remark-gfm tyarn add remark-gfm 代码配置 import Markdown from "react-markdown"; import remarkGfm from "remark-gfm"; <div class="markdown_container"> <Markdown remarkPlugi ...
2023-08-19 · 阅读 1083 · 字数 118
随着前端打包发布日渐频繁,之前偷懒的手动切换 API URL 的方式越来越浪费时间,所以需要能自动区分开发环境和生产环境,节省每次的发布时间。 没想到 react app 脚手架自带了这个功能,可以不依赖三方库实现开发环境的识别: var OcrUrl = "http://www.sunzhongwei.com/ocr"; if (process.env.NODE_ENV === "development") { OcrUrl = "http://localhost:5000/ocr"; } 确实贴心。 ...
2023-07-16 · 阅读 1629 · 字数 225
即支持文本中的换行符,例如,后台接口返回的 message 是: 暴击 \n 100000 倍 需要能解析其中的换行符。 实际上只需要加上一行 css style={{ "white-space": "pre-line" }} 例如: <Button key={index} onClick={CardButtonOnClick(ctx)} value={item.payload} style={{ margin: "5px", "white-space": "pre-line&q ...
2023-01-03 · 阅读 4945 · 字数 187
例如,Antd Pro 列表中,我想按照创建时间这列正序或倒序重新排列。 字段配置 { title: '创建时间', dataIndex: 'CreatedAt', valueType: 'dateTime', search: false, sorter: true, }, request 请求 export async function getItems( params: { current?: number; pageSize?: number; }, sort: any, options?: { [key: string]: any ...
2022-08-11 · 阅读 6049 · 字数 468
后台用 InfluxDB 存储的时序数据,查询时需要使用 UTC 时间。 为了偷懒,我的后台 go 接口没有对时间字段做处理,想直接使用前端传过来的 UTC 时间格式。 于是出现了一个低级的前端 Bug。 功能异常的请求 请求链接格式: http://www.sunzhongwei.com/someAPI?current=1&pageSize=20&startTime=2022-08-09T01%3A10%3A16Z&endTime=2022-08-10T01%3A10%3A16Z startTime: 2022-08-09T01:10:16Z endTime: 20 ...
2022-08-05 · 阅读 7131 · 字数 262
例如,我想在 Ant Design 的 Input 按钮右侧添加一个快捷按钮, 用来自动将文章标题生成网址 slug。 实现逻辑 Antd Input 组件有个 addonAfter 属性,可以在输入框右侧加入一个图标按钮 图标按钮在定义时,指定 onClick 事件处理 创建一个 react ref 绑定到 antd form 上,方便读取/设置 field 值 (没有使用 antd 自带的 useForm, 我觉得用 React.createRef 更通用些) 最终代码 import type {FormInstance} from 'antd'; import {getSlug} f ...
2022-05-20 · 阅读 12291 · 字数 484
正确的做法 例如这种,在 form 的 initialValues 里设置各个字段的默认值。 而不是去具体字段里用 value 或 defaultValue 属性来设置默认值。 <Form {...formItemLayout} form={form} name="register" onFinish={onFinish} initialValues={{ residence: ['zhejiang', 'hangzhou', 'xihu'], prefix: '86', }} scrollToFirstError > ...
2022-05-19 · 阅读 3879 · 字数 185
例如,使用 antd pro 开发的网站管理后台,在服务器部署时,想部署在 /admin 这种非根目录。根目录留给 go gin 的路由处理。 在 nginx 里按照正常 root 配置,访问时会报 404 错误。 config/config.ts 配置方法 需要修改 antd pro 的配置文件: config/config.ts 添加配置: publicPath: '/admin/', base: '/admin/', 打包目录 打包之后,上传服务器,解压后,将 dist 重命名为 admin。 nginx 配置 location /admin { alias /some/path/f ...
2022-05-14 · 阅读 4642 · 字数 888
由于视频文件太大,不适合通过自己服务器中转一层,还是在前端直接传到七牛云合理。 文档 七牛云 Go SDK 文档,参考上传凭证的生成:https://developer.qiniu.com/kodo/sdk/go 七牛云 JS SDK 文档,参考其自定义文件名:https://developer.qiniu.com/kodo/1283/javascript 关于 token token 上传凭证。 作用:客户端(移动端或者Web端)上传文件的时候,需要从客户自己的业务服务器获取上传凭证 有效期:默认情况下,在不指定上传凭证的有效时间情况下,默认有效期为1个小时。也可以自行指定上传凭证的 ...
2022-04-27 · 阅读 4332 · 字数 213
Antd Pro V5 的诡异问题不断,在新增了一个路由配置项,修改图标之后,导致报错。 之前的 V5 beta 版从来没有遇到这个问题,是最新的 V5 正式版新引入的问题。 新图标导致报错 { name: '配置项', icon: 'SettingOutlined', path: '/settings', component: './Settings', access: 'canAdmin', }, 报错信息: Module "./@ant-design/icons/SettingOutlined" does not exist ...
生活 | 跑步 清单 足球 鲁班 探索 孤独的美食家 驾驶 电视剧 收纳 奶爸 健康 game 电影 周末 joke |
---|---|
Geek | 健身 Laravel Git Vim MySQL Linux UI Windows SVN 纪录片 管理 Shell 游记 工具 手机 BackboneJS 自建博客 Mac DNS Tornado CDN Django Python AngularJS 理财 前端 Nginx 爬虫 Redis Javascript Browser 浏览器 推广 OAuth CSS PHP Social Networks 安全 运维 创业 杂记 VueJS Android Image IDE Java ReactJS 数据分析 SQLite RESTful 读书笔记 家电 ecshop Vagrant wordpress docker SEO GTD magento mongodb nodejs weex 冷知识 ruby iOS 微信小程序 AI CMS 快应用 backpack 广告联盟 OA 短信 UWP Win CSharp Tampermonkey graphviz 钉钉 WPS 数据字典 微信公众号 Fuchsia Adobe XD SQL Server thinkphp 代码规范 商业模式 Flutter 头痛的问题 serverless 视频制作 国际化 golang 服务器 Kotlin 网站建设 5G 笔记本 图片 spark spring 物联网 InfluxDB 图像识别 postgre rust |
成长的烦恼 | 闲言碎语 待产 不睡觉 写作 程序员 孙心然语录 原则 大鸿语录 |
地球 | 植物 时间 中文 赚钱 国家地理 烟台 一生伏首拜阳明 emoji 弟子规 英文 国际贸易 |