- 博客(28)
- 收藏
- 关注
RSS订阅原创 react+swiper 6 卡点记录
1.没有使用new Swiper创建swiper，而是使用swiper标签直接创建的element，获取swiper实例。
2024-01-03 14:38:09
413
原创 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
294
原创 js移动端禁止输入空格的正则使ios无法输入汉字的问题
s匹配任何空白字符，包括空格、换页符等。等价于 [ \f\n\r\t\v]把\s改为空格，就解决了。
2023-03-08 13:47:40
300
原创 InputItem的value和getFieldError一起用的时候onChange事件失效问题
InputItem的value和getFieldError一起用的时候onChange事件失效问题
2023-02-10 10:45:27
158
原创 antDesign Slider滑动输入条的marks配置避坑
antd官方文档说明marks为刻度标记，对象类型，且key的类型必须为Number，项目中需要用到负数发现报错，手动把key改为String类型实现想要的效果。 效果如下：
2022-06-02 15:08:24
1627
转载 控制台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
9657
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
16354
2
原创 配置 @/ 后面的路径提示
在项目根目录中创建文件jsconfig.json{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"], } }, "exclude": ["node_modules", "dist"]}
2022-02-17 15:44:43
500
转载 向后台请求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
1159
转载 轻量库nanoid的使用
转自前端常用库——nanoid_java_lc-CSDN博客_nanoid安装nanoid库npm i nanoid引入nanoidimport {nanoid} from 'nanoid'生成随机idnanoid()
2022-01-08 20:29:14
1361
原创 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
496
原创 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
530
原创 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
928
原创 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
929
原创 移动端 ＜＜ 通过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
582
原创 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
1353
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
1365
原创 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
738
原创 移动端 ＜＜ 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
9755
原创 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
66
原创 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
400
原创 CSS＜＜ 更改鼠标样式为自定义图片
body{ cursor:url("../img/aonmh-ssm66-001.ico"),auto;}
2021-11-17 14:31:44
1692
原创 移动端 ＜＜ 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
382
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人