![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 50
daoke_li
这个作者很懒,什么都没留下…
展开
-
vue3+vant4中表单内嵌picker的默认值设置
vue3+vant4中表单内嵌picker的默认值设置。原创 2024-06-16 08:02:07 · 381 阅读 · 0 评论 -
前端React老项目打包caniuse-lite报错解决思路
5、关键:打开生成的package-lock.json,查找caniuse-lite这个包,发现在browserslist包里面引用了版本"^1.0.30000792",在autoprefixer包里面引用了版本"^1.0.30000748",但。猜想这个4年前的项目基础环境只会比当时的更老,虽然package.json中锁死了相关的包的依赖版本(如"react-scripts": “1.1.4”),但他依赖的其他包仍然不能锁死版本,“ 未找到相关的合并请求。3、尝试本地打包,会报错。原创 2024-05-25 07:10:24 · 525 阅读 · 0 评论 -
一招将vscode自动补全的双引号改为单引号
打开设置,搜索quote,在结果的HTML选项下找到自动完成,折纸默认引号类型即可。vscode更新日期:2024-4-10。vscode版本:1.88.1,原创 2024-04-14 08:03:58 · 751 阅读 · 0 评论 -
一个div最简方法画太极图
直接上代码,一目了然。原创 2024-02-24 16:32:03 · 241 阅读 · 0 评论 -
域名无法访问了,如何找回浏览器的缓存
通常在周末,他有睡懒觉的习惯,但今天却早早地起来要打卡,结果我发现项目无法访问了。虽然迁移服务器是容易的,但由于这是一个纯前端项目,打卡数据存储在localstorage中。双十一即将来临,这意味着我购买了三年低配的阿里服务器,而它的服务期限也即将到期。为了提前做好准备,我在一周前对静态网站进行了备份,并成功地使用了Vercel进行部署(已经有了域名)。让事情更糟的是,我此刻正忙于其他事务,以至于忘记关注服务器到期的问题,直到今天(11月12日)早上孩子突然提醒我要打卡,我才突然意识到问题的严重性。原创 2023-11-12 14:50:28 · 267 阅读 · 0 评论 -
postcss基本使用
(峰华前端)原创 2023-05-31 10:44:16 · 1271 阅读 · 0 评论 -
rollup3 打包时报错 exports is not defined 或 Cannot use import statement outside a module
具体见:https://rollupjs.org/command-line-interface/#configuration-files。rollup2的配置文件是rollup.config.js,里面用es6写的导入导出没有问题,但升级到rollup3的时候报错。把配置文件的后缀改成.mjs,即明确的告诉rollup配置文件解析类型。貌似不识别es6的写法了。原创 2023-05-12 15:48:23 · 431 阅读 · 1 评论 -
react组件发布到npm
不识别jsx会报错:Unterminated regular expression. 无法识别JSX指令。回到测试项目中,停止服务器,安装这个包(注意包名如果重复需要修改才能发上去,安装时别忘了新包名)重新启动,可以看到页面已正常加载,此时引用的包就来自于npm服务器了。安装依赖包,其中rollup用3以上版本会报错,还没研究处理方法。在package.json中添加如下代码,可以简化执行指令。在/lib/bundle.js就可以看到打包后的输出文件。修改package.json中内容,作为外部引用入口。原创 2023-05-09 15:57:09 · 867 阅读 · 0 评论 -
最简npm发包步骤
【代码】最简npm发包步骤。原创 2023-05-05 14:41:14 · 652 阅读 · 0 评论 -
拖拽排序react-beautiful-dnd+antd-mobile的List最小实现
{${原创 2023-03-28 14:13:38 · 304 阅读 · 0 评论 -
antd-mobile中Form.Item下放入选择组Selector后无法实现单选
Selector组件中举例了只选一个的情况,在onChange事件中判断如果当前选中为空的时候不让操作即可实现单选。antd-mobile中Form.Item下放入选择组Selector之后,多选是没问题的,也可以不选;按需求将以上两种情况组合后,奇迹发生了:选中的按钮再次点击会被取消。在Form表单的Item中放入选择组,但实现的是单选的交互效果。请根据实际情况自己选择。原创 2023-03-22 17:04:33 · 501 阅读 · 0 评论 -
react+vite 不识别链式操作符?.报错Unexpected token .
如题,react项目,基于vite创建,在写?有另一个项目却能正常使用。对比两个项目的package.json和vite.config.js,更新了一些依赖,仍未解决。经网查,根目录下新建babel.config.js,内容为。但不知另一项目为何不需要此操作。原创 2023-01-30 15:18:52 · 907 阅读 · 0 评论 -
react项目升级报错、babel报错,.babelrc配置兼容等问题
由于开发环境和项目版本的兼容问题,尝试升级了react-scripts后,一大堆问题接踵而至,翻遍了百度和csdn,往往解决了旧的又出现新的,或者开发没问题而打包时报错,现罗列一下遇到的主要问题和最终解决方案,以供参考。...原创 2022-08-02 13:31:32 · 2182 阅读 · 0 评论 -
使用useImperativeHandle时父组件第一次没拿到子组件方法
一个tab两个按钮A、B,默认选中的A,当点击到B时需要显示B对应的图表。考虑到B的图表在页面加载时已经初始化完成,所以点击B时再调用图表的resize方法。由于tab中的图表是写在子组件里,所以通过useImperativeHandle实现父组件调用子组件方法,React版本,代码如下子组件:问题这样写在本地开发模式中正常运行,但生产环境中父组件首次加载不能拿到子组件的方法,需tab切换到A再次且到B才行。猜想原因,大概在生产环境中,父组件把子组件暴露出来的方法绑定到UI中的点击事件中,而子组原创 2022-06-30 06:35:43 · 681 阅读 · 0 评论 -
javascript大写数字转换
const inputNum = 100456789; const num = Array.from(inputNum+''); const strArr = '零壹贰叁肆伍陆柒捌玖' const unit = Array.from('仟佰拾亿仟佰拾万仟佰拾 ') let result = '元整' while (num.length) { const n = num.pop() result = strArr[n] + unit.pop() + result }..原创 2022-05-11 22:31:43 · 501 阅读 · 0 评论 -
我转行程序员的那一年(四)
App终乐队成,昙花显后再编程App的终点岛城的冬季不光空气湿冷,风刮起来也特别狂,尤其是高层楼。这天我到公司后,外面狂风的啸叫似乎更猛烈了,我甚至感到楼房都跟着晃动。突然,啪的一声,窗子被吹开撞在墙上,还好玻璃没有碎。我顶着风关上窗子,身后突然响起老板的声音:“给大家说一下,咱们APP项目的投资人撤资了,100万到不了了!”老板看起来好像没特别的悲伤,大概早已经预料到了,但这个消息还是明显的影响了大家的动力。泊露同学迟迟不能改进App,观石同学说以前做过安卓但时间久了拿不起来了,老板发了智联招聘,让原创 2022-01-01 07:24:41 · 1009 阅读 · 0 评论 -
css实现文本超过指定行数显示省略不生效的问题
css实现文本超过指定行数显示省略不生效的问题要用css实现文本超过指定行数显示三个点的效果,正常样式写法如下:/*超过2行隐藏,并以三个点结尾*/.limit2line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}但react项目中使用时遇到问题了。一共用了两处,一处起作用,一处不起作用,其中不起作用的元素在控制台中把样式前面的勾打掉原创 2021-10-22 18:49:20 · 1197 阅读 · 0 评论 -
css中:not()选择器同时排除多个的写法
css中:not()选择器同时排除多个的写法举例:[class^=p-]:not(.p-home):not(.p-powerOff) { .m-navBar { .r { font-size: .875rem; color: $c_primary; } }}原创 2021-10-22 18:27:57 · 1856 阅读 · 0 评论 -
css3滤镜投影filter: drop-shadow在IOS上不更新的问题
需求一个滑竿,上面的滑标是个盾牌形不规则形状,需要添加投影。滑标可通过点击或拖动而移动位置,看了之前的项目,使用了一张带投影的png透明图片实现。但本次尺寸调整,设计图上取到的尺寸和位置是滑标不带投影的部分,目测不准,设计要给出精确的位置也比较困难,我说可以用css3中的滤镜投影功能(filter: drop-shadow(rgba(x, x, x, 0.2) 2px 0px 6px))试一下。开发框架是react,UI库antd-mobile,滑竿使用其中组件问题先用设计给的盾牌图片替换滑标。原创 2021-09-03 19:24:16 · 1830 阅读 · 0 评论 -
react优化——在写useMemo之前
如果state更新缓慢确保程序运行在生产环境中确保state没有放在比实际需要更高的位置通过react开发工具等方法检测导致二次渲染的原因在高开销的子树上或其他需要的地方包裹useMemo可以不用useMemo的情况如下例,当App中的color变化时,我们会重新渲染一次被我们手动大幅延缓渲染的组件。import { useState } from 'react';export default function App() { let [color, setColor] = use原创 2021-07-03 15:24:29 · 138 阅读 · 0 评论 -
我为什么从chrome转到edge?
几年前在上家单位,只因为前端调试工具强大,开发时一直用chrome。到这家单位后因为平时工作多为移动端H5开发,需要安卓真机调试,所以必须用chrome。但因为墙的问题,inspect几乎不能用,我只好安装一个比公司App中chrome环境稍低的chrome版本,这样设备列表下就会出现一个使用低版本进行调试的按钮,点击就可打开真机调试窗口。在不翻墙的情况下,没找到更合适的方法。中间偶用高版本进行翻墙尝试,总觉得不方便。但好景不长,App中换容器后,chrome版本从70+一下子回到了59,当时最新版已原创 2021-06-18 14:39:09 · 463 阅读 · 0 评论 -
文本超过指定行数显示折叠、展开按钮并以三个点结束
需求一段从接口获取到的文本,要求显示时,如果长度超过指定行数,则以三个点省略后面内容,并出现“全文”按钮,点击后显示全文,“全文”按钮变成“收起”,再点恢复最初状态。问题如果等文本加载完后获取了内容高度,发现高度超过指定行数,这时再折叠就会看到页面在极短时间内闪烁一下。解决引入一个state变量cloak,先将内容区域隐藏,当内容加载并计算完后再显示出来。参考代码...原创 2021-06-08 17:09:26 · 1835 阅读 · 1 评论 -
CSS3实现像marquee的文字走跑马灯(滚动字幕)组件
为什么要自己写组件html中的标签可实现文字跑马灯效果,但这个标签在H5标准中已经被废弃,未来可能不受支持。自定义的组件调整动画效果、性能方面更灵活,可以实现更多需求。组件说明组件可实现模拟标签的效果,也可使用css3动画获得更流畅的体验参数说明:v - 速度,每秒移动多少个像素,默认100t - 刷新一次的时长(ms),默认50,只在frameWise为true时有效frameWise - 为true即表示使用逐帧动画效果,内容运动过程中有振动的感觉;为false则使用css3的过原创 2021-05-26 18:32:23 · 930 阅读 · 0 评论 -
前端图片显示问题——css背景图不显示
背景图片不出来问题正常图片的链接地址在浏览器即可访问,但有的图片的链接地址在浏览器打开后变成一个下载地址,会自动下载了这个图片。使用css3的背景图引入后,后者不显示,查看DOM会发现丢失了图片地址。解决方案在引用时给地址两端加上引号,即由style={{backgroundImage:`url(${recipe.menuImage})`}}改为style={{backgroundImage:`url("${recipe.menuImage}")`}}...原创 2021-05-26 18:17:23 · 1966 阅读 · 0 评论 -
React运行时——React as a UI Runtime
本篇是笔记,原文地址: https://overreacted.io/zh-hans/react-as-a-ui-runtime/在本篇文章中,我会从最佳原则的角度尽可能地阐述 React 编程模型。我不会解释如何使用它 — 而是讲解它的原理。宿主更新React 元素并不是永远存在的 。它们总是在重建和删除之间不断循环着。React 元素具有不可变性。例如,你不能改变 React 元素中的子元素或者属性。如果你想要在稍后渲染一些不同的东西,你需要从头创建新的 React 元素树来描述它。条件渲.原创 2021-04-29 15:49:52 · 1081 阅读 · 4 评论 -
《useEffect完全指南》笔记
原文地址:https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/作者简介:https://overreacted.io/zh-hans/my-decade-in-review/useEffect(fn, [])和componentDidMount的区别前者会捕获props和state,所以在回调函数中不管等多久后,拿到的props和state依旧是初始值(定时器例子)。如果需要拿到实时数据,则可使用ref或后文提到的其它方式。函.原创 2021-04-21 07:22:33 · 477 阅读 · 1 评论 -
如何使用React Hooks优雅的获取数据?
原文链接:https://www.robinwieruch.de/react-hooks-fetch-data作者简介:https://overreacted.io/zh-hans/my-decade-in-review/如果我们要请求一个接口获得数据,并要遍历到当前页面中渲染出来,可能会这么写import React, { useState, useEffect } from 'react';import axios from 'axios'; function App() { con.原创 2021-04-20 18:56:04 · 808 阅读 · 0 评论 -
antd-mobile的长列表ListView不更新的坑
antd-mobile的长列表ListView在react hooks中不更新的问题在react hooks中使用antd-mobile的长列表listView的时候,经常发现有时页面数据交互(如修改某行状态、点赞、评论等)后进行了更新,list和dataSource也更新了,但页面就是不更新;而上滑加载数据时list长度增加,dataSource随之更新,页面就能正常更新。感觉这应该是dataSource没有很好的识别更新条件而为驱动组件刷新,经反复探索,发现需要在dataSource更新的时候将lis原创 2021-03-24 10:52:55 · 1201 阅读 · 0 评论 -
vite+react+antd-mobile实现类似react-app-rewired的按需加载
步骤开发环境安装依赖yarn add -D vite-plugin-babel-import修改vite.config.jsimport vitePluginImport from 'vite-plugin-babel-import'……plugins: [ reactRefresh(), vitePluginImport([ { libraryName: 'antd-mobile', libraryDirectory: 'es',原创 2021-03-03 14:35:14 · 1386 阅读 · 2 评论 -
使用antd-mobile的PickerView实现一个跨天时间选择器
需求逻辑今天到明天预约时间范围是下一分钟开始往后的24小时切换每列数据时,其他列对应的数据要自动切换到合适的范围每次打开预约开关时,预约的数据列表及时更新antd-mobile的PickerView组件有个bug:在onChange事件中切换数据源后,有时可以自动再次触发onChange以获取正确的值,但有时不会。所以这里在每次切换数据源后,根据情况手动获取picker的值以进行修正完成效果如下:组件代码import { useState, useEffect } from 'reac原创 2021-02-27 14:28:52 · 1632 阅读 · 1 评论 -
使用了antd-mobile的Picker造成点击事件多次触发
使用了antd-mobile的Picker造成点击事件多次触发需求页面上一个显示温度的div(<div className="tem">下称 .tem),点击时弹框,通过弹框修改这个温度的数据。环境使用 react hooks + antd-mobile,弹框使用 Picker 组件实现显示温度的div如下,其中的子组件<TemPicker >封装了Picker组件。当 .tem 被点击时,手动通过触发这个隐藏的 .itemForPicker 的点击事件来实现弹出。……原创 2021-02-10 14:44:22 · 1110 阅读 · 0 评论 -
react(含hooks)中同步获取state值的一些方法
环境"dependencies": { "babel-plugin-transform-decorators-legacy": "^1.3.5", "customize-cra": "^1.0.0", "rc-form": "^2.4.11", "react": "^17.0.1", "react-app-rewired": "^2.1.8", "react-dom": "^17.0.1", "react-router-dom": "^5.2.0",原创 2021-01-17 15:13:57 · 6369 阅读 · 2 评论 -
js中数字调用原型上的自定义方法后被包装成对象,typeof换成instanceof解决问题
一年多前用nuxt2.0写的项目,一直正常运行。但最近重新下载依赖后不能正常运行了。回退到前面正常的版本,重新安装依赖,仍然不行,看了看package-lock.json也和以前版本相同。查找不能正常运行的原因,发现是我加载Number原型上的方法被调用时,this变化了,以前是数字,现在变成了一个数字包装的对象。而这里判断数字时用了typeof,经尝试,改为instanceof即可解决问题。/** * 随机取出一个字符或元素 * @param n 随机取出n个元素 * @return.原创 2021-01-08 22:54:44 · 103 阅读 · 2 评论 -
echarts树图tree制作家谱教程
echarts树图tree制作家谱教程缘起国庆节回老家,看到家族里长辈们整理的家谱并印成了一本书,到我这一代已经是第六代了。我辈分低,从小在村里见了跟我爸年龄差不多的人都是爷爷婆婆的叫,但对于这些族人的族内关系却不清楚——从我记事起就没见过很正式的家谱,据说早先有过,但文革时破四旧遗失了,再也没人整理。这次的家谱书比较清晰的记录了每一家在家族中的关系位置和家庭成员信息,对于宗族关系用表格实现,跨了四页。我翻阅时想到如果在电脑上用图表中的树图把家族关系列出来会非常清楚直观,但直到前几天结课才有时.原创 2021-01-02 19:52:28 · 6593 阅读 · 16 评论 -
css3动画旋转时被切掉一块?
需求圆角半径为50%的按钮里面放一个居中的小图标,当呈现激活状态时给按钮涂上底色并左右旋转一下再停止。问题当按钮被激活后在旋转过程中,仔细观察可发现右边的边缘被切掉一小部分(图上是正常的),旋转结束后立即回复。观察dom结构,按钮的宽高是固定的,而装载按钮的容器宽度是非常宽的。解决最后一前端女同事大胆尝试,将外面容器的宽度(百分比)减去1像素后,问题解决。原因原因不清楚,因为按钮容器宽度在绘制按钮时根据个数平均分的,最多能容纳4个。实际上放了3个按钮的看起来问题不明显,而原创 2020-12-25 16:19:40 · 368 阅读 · 0 评论 -
reacthooks中app.js里面useHistory报错:The prop `history` is marked as required in `Router`, but。。。
用reacthooks 重写项目,在使用useHistory时发现写在其他页面正常跳转,而写在app.js里的不正常,报错hook The prop `history` is marked as required in `Router`, but its value is `undefined`打印了一下果然是undefined,仔细对比其他页面,发现路由是定义在app.js中的,所以其他页面相当于是路由的子组件,环境不一样。经查找,app.js中的正确使用方法是:import { c原创 2020-12-25 15:51:24 · 1779 阅读 · 0 评论 -
react中antd-mobile的组件如Switch阻止冒泡的方法
需求一个卡片,点击跳转卡片上有个切换开关Switch,点击时需要阻止卡片跳转的动作问题Switch的api里只有onChange事件,参数里没有react或原生事件参数解决方案在Switch外面包一层div,在这个div上使用react事件的阻止方法:onClick={e=>e.stopPropagation()}<div className='r' onClick={e=>e.stopPropagation()}> <Switch che原创 2020-12-25 15:36:12 · 1483 阅读 · 0 评论 -
react脚手架creat react-app创建的项目编译/热更新慢?
新起了一个项目,cra脚手架创建的react,但发现热更新非常慢,一次要五六秒。而几周前同样创建过的一个项目,热更新一次就一两秒钟。对比两个项目,把package.json整个替换了重装依赖,问题依然。最后把yarn.lock文件给替换了,问题解决。猜想问题是依赖的小版本升级造成。...原创 2020-11-30 15:44:07 · 1690 阅读 · 0 评论 -
你的JavaScript代码为什么不写分号?
我希望不写分号,原因有:现代的写法中不会轻易导致代码错误; 如果忘记写分号,移动端开发时编译一次需要五六七八秒,然后报个错,感觉浪费时间; 视觉上更简洁; 符合潮流。有时可能会需要加,比如:以小括号“( )”或中括号“[ ]”开头的语句,可能是解构赋值,也可能是数组使用forEach等操作的时候; 团队里喜欢写分号的人需要用到不喜欢写分号人的代码片段,没分号的代码拿过去就容易报错跑不起来,而喜欢分号的人也不愿意修改编译检查规则。...原创 2020-11-13 13:52:42 · 1011 阅读 · 0 评论 -
lottie升级后报错:lottie.js:6229 Error: <svg> attribute viewBox: Expected number, “0 0 undefined undefi…
创建新项目,引入原项目的部分代码,发现一个用lottie导入的小图标动画不见了,但这个元素位置大小都对,只是看不见,就像透明度为0了。查看控制台,有报错:lottie.js:6229 Error: <svg> attribute viewBox: Expected number, "0 0 undefined undefi…在源码中查找,位置在lottie.js:6229 行if(this.renderConfig.viewBoxSize) { this.svgEle.原创 2020-11-10 10:30:18 · 2647 阅读 · 4 评论