- 博客(30)
- 收藏
- 关注
原创 ant design的upload组件踩坑记录
1.自定义了onpreview和onchange事件,上传文件后,文件显示有preview的icon但是被禁用,无法调用onpreview事件。苦苦查找原因,问题出在了这里,当文件没有url的时候,按钮被禁用掉了,官方文档没有说明。antd版本 v4.17.0。
2024-06-06 09:43:24
278
原创 git 合并多个commit 使分支保持一次提交
2.控制台输入 git rebase -i d0c5de8f7ca8e58fef347b36dd6b0f42f551cdb4 进入变基。11.git push origin story-qqq -f 强推覆盖掉远程的多次提交。1.控制台输入 git log 查看commit历史 找到历史提交sha。4.保留第一行的pick 后面的pick改为s。3.输入英文i进入VM输入模式。7.输入英文i进入VM输入模式。10.输入:wq保存退出。5.esc退出输入模式。6.输入:wq保存退出。9.esc退出输入模式。
2024-05-24 13:24:30
378
原创 react+swiper 6 卡点记录
1.没有使用new Swiper创建swiper,而是使用swiper标签直接创建的element,获取swiper实例。
2024-01-03 14:38:09
470
原创 JS 移动端失焦事件和点击事件的执行顺序问题导致的bug
输入打款金额的InputItem用了antd mobile的type="money",在input的focus事件中弹出虚拟键盘,在input的blur事件中处理输入的金额,转千分位展示。即修改state的list也做重新渲染。在input的blur事件和删除的点击事件中处理了同一个state,但由于setstate的执行是异步的,这两个事件的执行顺序是先执行删除的点击事件,后执行失焦事件,所以在删除的点击事件中的listitem的移除与失焦事件中的转千分位修改数组,两个setstate合并并使用了后者。
2023-08-30 10:47:43
344
原创 js移动端禁止输入空格的正则使ios无法输入汉字的问题
s匹配任何空白字符,包括空格、换页符等。等价于 [ \f\n\r\t\v]把\s改为空格,就解决了。
2023-03-08 13:47:40
353
原创 InputItem的value和getFieldError一起用的时候onChange事件失效问题
InputItem的value和getFieldError一起用的时候onChange事件失效问题
2023-02-10 10:45:27
185
原创 antDesign Slider滑动输入条的marks配置避坑
antd官方文档说明marks为刻度标记,对象类型,且key的类型必须为Number,项目中需要用到负数发现报错,手动把key改为String类型实现想要的效果。 效果如下:
2022-06-02 15:08:24
1822
转载 控制台warn解决[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event. Consi
控制台报错如下:[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.[违规]添加非被动事件监听器到滚动阻塞'鼠标滚轮'事件。 考虑将事件处理程序标记为“被动”,以使页面响应更快。解决方案:1、npm i def..
2022-02-28 19:36:22
11645
1
原创 vue3 中获取当前路由地址避坑——router.currentRoute与$route
1.router.currentRoute 相当于 $route但是$route.path或者$route.fullPath只能在组件中用 组件里头:`/user?a=10` $route.path === /user $route.fullPath === /user?a=10js模块中要使用 router.currentRoute// js模块中:router.currentRoute.value.fullPath 就是当前路由地址2.router.currentRou...
2022-02-18 15:05:26
17374
2
原创 配置 @/ 后面的路径提示
在项目根目录中创建文件jsconfig.json{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"], } }, "exclude": ["node_modules", "dist"]}
2022-02-17 15:44:43
531
转载 向后台请求img的url出现403的解决办法
最近在使用爬虫爬取数据的时候,发现很多网站为了保护版权都加入了防盗链。具体表现为:在本地访问图片正常,url访问也可以,但是img的src访出现403。在网上查阅了一些资料后发现了解决问题的办法。可以在img标签中加上referrer="no-referrer"也可以在html的header头部加入<meta name="referrer" content="no-referrer" />出现403的状态其实是因为http请求的header中有一个referrer用来标识
2022-02-11 17:25:17
1190
转载 轻量库nanoid的使用
转自前端常用库——nanoid_java_lc-CSDN博客_nanoid安装nanoid库npm i nanoid引入nanoidimport {nanoid} from 'nanoid'生成随机idnanoid()
2022-01-08 20:29:14
1395
原创 VUE << pubsub 消息的订阅与发布 —— 任意组件间的隔空喊话
1.安装pubsub库 npm i pubsub-js2.在需要订阅和发布的组件中 引入import pubsub from 'pubsub-js'3.订阅消息(接收数据)回调函数中的第一个参数是订阅消息的函数名,第二个参数是传递的数据 mounted () { // 使用一个数据来进行接收 以便解除订阅 this.pubId = pubsub.subscribe('hello',function (msgName,data) { co.
2022-01-04 19:29:06
514
原创 VUE << vue.config.js配置文件及代理操作
1.使用vue inspect > output.js 可以查看到vue脚手架的默认配置2.使用vue.config.js可以对脚手架进行个性化定制,详情见:配置参考 | Vue CLI遇到的跨域问题就可以在配置文件中使用反向代理操作进行解决例:module.exports = { devServer:{ proxy:{ '/api':{// 匹配所有以 '/api'开头的请求路径 target:'h
2022-01-04 14:43:11
555
原创 CSS << 文字超出部分显示... & ul超出部分横向滚动
ul超出部分横向滚动ul { width: 100%; height: 1.8rem; overflow-x: auto; overflow-y:hidden; display:-webkit-box;}li { width: 0.9rem; height: 1.7rem;}以上代码是移动端项目中使用,给ul设置好固定的宽高,overflow-x:auto; 即X轴方向上自动设置,overflow-y:hidden;则如果有很多个li的话 超出部分是隐藏.
2021-12-21 16:56:48
993
原创 Vue << 拦截器(interceptors )& 过滤器(filter)
拦截器在axios 请求或响应被 then 或 catch 处理前拦截它们。设置请求拦截器 // 设置请求头 axios.defaults.headers = { 'Content-Type': 'application/x-www-form-urlencoded' } // 请求拦截器 用变量接收 便于后面移除拦截器 const ceptors_req = axios
2021-12-04 20:04:38
968
原创 移动端 << 通过js动态设置字体大小
function setRem() { var ui_w = 375; // 获取屏幕的宽度 var clientWidth = document.documentElement.clientWidth || document.body.clientWidth; console.log(ui_w,clientWidth); // 通过js动态改变html根节点字体大小 var html_ = document.
2021-12-02 10:09:03
591
原创 Webpack << 基本使用 及出现的报错解决
安装方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令,不建议使用 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中 查看webpack版本信息webpack -v初始化项目npm init-y使用npm管理项目中的依赖包,在项目根目录中使用该命令使用webpack的配置文件简化打包时候的命令webpack.config.js在项目根目录中创建该文件由于运行webpa...
2021-12-01 11:03:44
1440
2
原创 MongoDB << 连接数据库并创建数据等使用方法
1.mongodb官网MongoDB: the application data platform | MongoDB2.进入MongoDB官网下载MongoDB以及MongoDB compass 和Mongodb--database--tools3.nodejs操作MongoDB数据库需要依赖nodejs的第三方包mongoose终端指令: npm install mongoose4....
2021-11-22 21:05:40
1395
原创 Node.js << fs 模块的基本语法
配置步骤1. https://www.npmjs.com/package/fsfs模块的官网链接2. 集成终端中输入 cnpm i mkdirp --save 或 npm i mkdirp --save3.引入模块 const mkdirp = require('mkdirp');4.看文档使用基本使用引入模块var fs = require('fs');1.fs.stat 检测是文件还是目录fs.stat('./package.json',(e...
2021-11-19 19:49:41
766
原创 移动端 << Touch.js事件库 和 hammer.js 事件库
Touch.jsTouch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.(已停更)Touch.js手势库专为移动设备设计,是Web移动端touch点击事件不错的解决方案GitHub - Clouda-team/touchjs: Touchjs getsture library用法://引入touchjs<script src="js/touch-0.2.14.min.js"></script>
2021-11-18 11:23:12
10205
原创 Jquery << 四格手风琴案例
html部分内容创建一个ul,4个li,每个li中各装一张图片<ul class="sfq"> <li class="li_"> <img src="./img/kj1.png" alt=""> </li> <li class="li_"> <img src="./img/kj2.png" alt="">
2021-11-18 10:37:42
73
原创 Java script<< 渲染数据
<button onclick="showData()">渲染数据</button><ul class="list"> </ul> html内容<style> * { margin: 0; padding: 0; } button { display: block; .
2021-11-17 20:54:25
477
原创 CSS<< 更改鼠标样式为自定义图片
body{ cursor:url("../img/aonmh-ssm66-001.ico"),auto;}
2021-11-17 14:31:44
1968
原创 移动端 << Vscode自定义用户代码片段
1.点击设置 ——用户代码片段2.选择新建全局代码片段文件... 输入新建的代码片段文件名3.删除默认片段4.复制进新的代码片段5.配置成功 新建页面输入html 回车键代码片段如下:{ "html": { "prefix": "html", "body": [ "<!DOCTYPE html>", "<html>\n", "<head>", "\t<meta c...
2021-11-11 11:33:25
415
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人