- 博客(95)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 react基础
React是一个用于构建用户界面的 JavaScript 库，起源于Facebook的一个内部项目Instagram，后来发现非常好用，最终于2013年被Facebook开源。React目前已经形成了一套生态，并且不仅在前端开发领域广为流行，在很多其他平台应用程序开发领域都获得了广泛使用。无论是通过CDN引入库的方式在HTML页面中使用React，还是用脚手架来搭建React项目，他们开发React应用的方式都是一致的，并且后者最终会被转换成类似第一种使用的方式来执行代码。
2023-10-24 14:56:03
180
原创 功能扩展————滚动加载关联分页
文章目录功能描述:table+Pagination功能分析功能实现1. 监听滚动条滑动到底部的状态2.读入数据总结功能描述:table+Pagination将滚动条与分页组建进行联动；在一个list组建中进行渲染,超出部分显示滚动条滚动条下拉加载，追加之前的list数据点击已经加载过的分页码跳转到对应的加载位置拖动滚动条随着数据的变化分页组建的页码也跟着进行变化功能分析实现以上功能首先了解分页组建的基本使用及滚动条追加懒加载出发时机第一步监听滚动条滑动到底部的状态第二步接口分
2022-03-25 13:49:01
516
原创 ant-design table fixed错位缩放解决方案
文章目录一、问题：table fixed错位二、原因三、优化滚动条一、问题：table fixed错位在使用vue ant-design UI组件库的时候遇到一个问题，在使用table组建的时候，缩放会出现fixed 侧位错位的情况。目前官网组件库就存在情况，虽然平时用户不会像产品一样骚错做二、原因组建库已经相当完美，但测试总是能够找出了出现问题原因就是fixed的header与table的header不能够统一位置，每次都会计算给table一个margin-bottom解决办
2022-03-16 16:01:02
3195
原创 实现点击显示退出大屏，鼠标悬浮3秒消失
文章目录使用场景一、大屏实现二、鼠标不移动消失使用场景1. echarts图表显示的时候会使用到大屏幕及2. 滑动鼠标几秒之后取消鼠标。一、大屏实现在此使用原生js展示demo；点击展示大屏，退出全屏 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
2022-03-15 15:34:19
1847
原创 vue综合问题归纳-------不能及时获取dom信息
项目场景：项目场景：更改数据后，想立即使用js操作新的视图的时候需要使用它问题描述：数据代码：<template> <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">更新信息显示直接获取: {{msg1}}</div> <div v-if="msg2">更新信息显示$nextTick: {{msg2}}</d
2022-03-01 17:20:48
374
原创 vue综合问题归纳-------input框赋值后不能进行编辑
项目场景：项目场景：前端实现查看编辑功能的时候会出现， input框赋值后input框不能进行编辑,编辑之后自动取消，验证无法进行取消问题描述：数据代码：<el-textarea v-model="drawerForm.msg" placeholder="请输入功能描述" :rows="3" allowClear
2022-02-10 11:42:10
2625
原创 文件上传校验upload---综合
文件上传之前进行文件校验 beforeUpload(file,UpFileList) // file：上传单个文件时候的文件内容，UpFileList：上传多个文件时的文件内容组成的数组 // 1、控制文件数量 if (this.fileList.length + UpFileList.length > 10) { this.$message.warning('超过文件上传数量限制') // 设置上传的文件为.
2022-02-08 18:05:57
2057
原创 vue过滤器--超出部分显示...
filters: { ellipsis (value,count) { if (!value) return '' if (value.length > count) { return value.slice(0,count) + '...' } return value } }{{item.c | ellipsis(8)}}
2022-01-18 17:25:35
536
原创 NPM 注册表管理器---nrm
这里写自定义目录标题1. nrm是什么？2. nrm安装使用2.1 nrm安装2.2 常用命令2.3 其他命令1. nrm是什么？nrm可以帮助你不同的NPM登记之间方便，快捷开关，现在包括：npm，cnpm，taobao，nj(nodejitsu)nrm本身不是网站，更不提供npm镜像仓储、还可以进行公司内部源址配置2. nrm安装使用2.1 nrm安装$ npm install -g nrm2.2 常用命令nrm ls 查看所有的镜像源npm ---------- h
2022-01-04 17:06:05
551
原创 点击弹层外部关闭弹出层-closest(),vue
应用场景：点击自身以外地方关闭弹出层:诸如咱们CSDN检索框,点击以外的地方进行关闭;closest() 描述：jQuery API对这个函数的解释是：closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，
2021-12-23 09:27:32
823
原创 Vue v-for 循环更优雅
文章目录前言 : 基本使用逐步优雅步骤1. 始终在v-for循环中使用key2. 在一定范围内使用v-for循环3. 避免在循环中使用v-if4. 使用computed属性或方法5. 或者在循环外包一层元素6. 访问循环中的索引7. 迭代对象前言 : 基本使用在Vue中，基本上每个项目都会用到v-for循环。它们允许你在模板代码中编写for循环。这在碰到诸如以下情况时特别好用：<ul> <li v-for='product in products'> {{
2021-12-22 09:51:23
706
原创 vue-element Cascader--demo使用
根据字符自适应显示边框单点关闭检索文字及字符长度获取每个对象信息三个以来文件 <link rel="stylesheet" href="common/plugins/element-ui/lib/theme-chalk/index.css"> <script src="common/plugins/vue/vue.min.js"></script> <script src="common/plugins/element-ui/l.
2021-12-17 18:12:52
233
原创 img标签onerror事件解决无限循环报错
问题描述：问题：img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，这样让人很不爽，如何变得美观些呢原因分析：由于反显资源找不到或者路径不存在,就会按着img默认处理方式进行处理解决方案：1. 找一张默认图片进行替换2. 利用onerror事件进行触发3. onerror事件存在重复触发的现象<img src="url" onerror= "this.οnerrοr='';this.src='static/images/nop.svg'">即可解决
2021-10-09 17:48:53
1376
原创 浏览器事件 - 监听浏览器刷新问题及解决方案
1. 浏览器事件：浏览器的刷新和关闭onbeforeunload：在页面刷新和关闭的时候触发事件，表示正要去服务器读取新的页面时调用，此时还没开始读取。例如: 刷新浏览器的时候tab会切换到默认值,而浏览器缓存却还是老样子,这样就可以使用浏览器恢复默认//检测浏览器刷新window.onbeforeunload = function() { //设置默认sessionStorage值 sessionStorage.removeItem('tab','tab1')}onu
2021-09-07 17:55:40
11201
原创 JavaScript解密之旅-----数据级联显示
文章目录省市县三级联动一、 需求分析二、 实现方案二、 同类数据处理省市县三级联动项目中经常会遇到省市县三级联动,地址自动匹配一、 需求分析实现效果是,三个省市县 select 下拉菜单依次联动下拉省初始化加载数据,市与县是通过上一级确定的范围更新应用技术是JQ city.js 数据二、 实现方案<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2021-08-31 15:48:21
1415
原创 正则学习小记----3
项目场景：例： var file_names= [".amnesia", ".@decrypt_2017", ".CRYPTOBOSS", "/\.\[\S+@\S+\.\S+\]\.SON$/",'/\\.\\[\\S+@\\S+\\.\\S+\\]\\.LOCKED$/']需求描述：将数组中的字符串和正则分离开分析：第一步:循环数组第二部:子项匹配是否符合正则第三部: 将各自状态字符串放入数组解决方案：按着正则匹配效果前后均有/ var file_nam
2021-08-27 12:06:53
1422
原创 JS实现HTML标签转义及反转义
让标签转义function HTMLEncode(html) { var temp = document.createElement("div"); (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html); var output = temp.innerHTML; temp = null; return output;}让标签不转义function HT
2021-08-26 11:06:00
1651
原创 工具类-----正则获取文件名及后缀
var fileName = "www.aaa.com/index.html";方法1var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);方法2var fileExtension =fileName.substring(fileName.length-3,fileName.length).toLowerCase();方法3var fileExtension = fileName.split('.').p
2021-08-23 10:39:51
2901
原创 常用技巧——阻止windows.scroll事件
问题描述：问题：在项目常常遇到在当前的滚动区域会出发window.scroll事件 原因分析：问题的分析：触发了全局的window.scroll事件，默认内部在采用鼠标滑动的时候，会触发顶级window的方法解决方案：解决方案： document.documentElement.style.overflow='hidden';//即：设置html元素的overflow属性hidden document.body.style.overflow='hidden'//移动端的可以这
2021-08-11 15:08:03
2576
原创 JavaScript解密之旅-----前端报错总结
文章目录一、控制台报错1. 模块引入一、控制台报错1. 模块引入错误描述：Uncaught SyntaxError: Cannot use import statement outside a module错误原因:定义了一个JavaScript文件，声明几个变量，利用模块化导出变量解决办法需要在script标签上添加属性type=“module” // 解决方法 <script type="javascript/text" src="./index.js"&g
2021-07-18 13:16:22
1492
1
原创 JavaScript解密之旅-----数组的扁平化方法总结
文章目录数组的扁平化处理一、ES6语法...二、toString & split || join & split三、reduce四、递归五、 ES7 flat数组的扁平化处理数组扁平化是指将一个多维数组变为一维数组一、ES6语法…ES6 对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。也可以理解为 … 是对二维数组变成一维数组// 方案1 let arr = [1,2,3,[4,5,[6,7,[8,9]]]] function
2021-07-09 10:53:57
137
原创 JavaScript用法------判断二维数组
var a = [[1,2,3],[2,3,4]]； // 判断是否是二维数组 // some是ES6的方法遍历每项,其中一项为正就返回true // every是ES6的方法遍历每项,其中所有为正就返回true let isTwoArray = tempDetail.ruleList.some(items => { return Array.isArray(items); }); // 判断二维数组内是否包含某项元素 ...
2021-06-29 09:11:41
4792
原创 常用技巧——div增加disabled样式
开发过程中常常会用到hosts进行切换https://pc.qq.com/detail/8/detail_12168.html
2021-06-18 09:06:08
3017
3
原创 工具类------验证码倒计时
学习目标： 时间倒计时 验证码// css.get-co
2021-05-28 21:28:30
1364
原创 JavaScript解密之旅-----条件判断及高级用法总结
文章目录条件判断常用一、if/else语句二、三元表达式三、或（||）与 (&&)语句1. ||（逻辑或）2. &&（逻辑与）四、switch/case语句总结条件判断常用一、if/else语句语句用于基于不同的条件来执行不同的动作代码if ('条件语句1') { // 如果 条件语句1 为 true 执行该代码块} else if ('条件语句2') { // 如果 条件语句1 为 false 且 条件语句2 为 true 执行该代码
2021-05-24 14:50:49
1956
1
原创 JavaScript解密之旅-----数组的遍历方法总结
文章目录数组的循环一、forEach（）二、map（）三、filter（）四、reduce（）与reduceRight()五、every（）六、some（）七、find（）与findIndex（）八、 for in九、 for of十、 for总结数组的循环一、forEach（）对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。 var arr = [1, 2, 3,
2021-05-14 16:49:32
1595
21
原创 JavaScript解密之旅----JS循环机制宏任务与微任务
JS循环机制JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为。文章目录JS循环机制事件循环一、任务队列1. 概念2. tick关键步骤二、宏任务1. 概念2. 场景二. 微任务1. 概念2. 场景三、 运行机制1. 图解2. 案例分析事件循环防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：一类是基于 Browsing Context，一种是基于 Worker
2021-05-13 10:40:53
752
原创 VUE框架基础--------生命周期理解
vue的生命周期1. 生命周期Vue实例从创建到销毁的过程，就是生命周期创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、销毁等一系列过程2. 周期阶段Vue生命周期可以简单分为四个阶段:创建阶段----> beforeCreate,created挂载阶段----> beforeMount,mounted运行阶段----> beforeUpdate,updated销毁阶段----> beforeDestroy,destroyed3. 生命周期详解
2021-05-11 16:50:07
955
1
原创 JavaScript解密之旅----call apply bind使用原理及JS手写
文章目录前言一、使用上的异同1. 相似之处：2. 不同之处二、call详细用法1. 通俗解释2. 代码案例3. Js手写callapply详细用法1. 代码案例2. Js手写applybind详细用法1. 代码案例2. Js手写bind综合Demo前言call apply bind，这三者都是用来改变函数的this对象的指向的。通俗来讲就是，东风之礼，借来可用一、使用上的异同1. 相似之处：都是用来改变函数的this对象的指向的。第一个参数都是this要指向的对象。都可以
2021-05-08 15:31:44
1284
5
原创 VUE框架应用包---------微信二维码应用
微信二维码：说明: 项目中的场景中对文章的进行微信输出二维码，或者二维码进行扫描跳转链接。应用：提示：这里可以添加要学的内容例如：1、 VUE安装包安装QR包npm install --save qrcodejs22、 引用导入import QRCode from “qrcodejs2”3、 页面使用<template> <div class="qrcodeimg"> <p id="qrcode"></p>
2021-04-28 16:43:44
1279
原创 JavaScript算法------计算出现频率最高的元素及数量
系列文章——字符串求取出现次数及元素本身<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.
2021-04-27 14:41:35
1638
2
原创 JavaScript高频使用之防抖与节流
防抖节流一、防抖1. 防抖说明概念：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。。通俗：乘客坐公交车(触发事件)，乘客上公交车10秒钟后出发(执行事件监听器)，这时如果有人上公交车(在10秒内再次触发该事件),再等10秒再出发(重新计时)。2. 应用场景给按钮加函数防抖组织表单多次提交对于输入框连续输入进行验证请求时，用函数防抖能有效减少请求次数判断scroll是否滑倒底部，滚动事件+函数防抖3. 防抖原理1. 为什么会引起抖动？用户在input框输入，监听
2021-04-23 17:01:23
1646
原创 项目场景-------滚动条横向竖向同步滚动
项目场景之滚动条横向竖向同步滚动1. 项目场景：提示：项目上有个自动化数据比对工具需要在视图进行滚动条双向监听滚动：2. 属性描述：提示：涉及到几个属性值需要了解： // 垂直滚动条 // scrollHeight;--------->可滚动的高度 // clientHeight;--------->滑块的高度 // scrollTop; --------->已纵向滚动的距离 // 水平滚动条 /
2021-04-15 15:21:59
3116
原创 公众号-----申请账号，账号管理，开发配置，接口权限详细配置
公众号微信公众平台，简称公众号。微信推出的自媒体平台，提供一对多的媒体性活动，如消息推送、品牌传播、分享等，已经形成了一种主流的营销方式。订阅号与服务号的区别1. 申请账号不同类型账号功能介绍，如下图：根据需要选择合适的账号类型，按着注程引导完成注册。注：个人只能申请注册订阅号2. 账号管理微信公众平台官方提供的后台对公众号进行管理。1. 粉丝管理打标签、黑名单发送消息2. 自动回复关注时回复当公众号被关注时，自动回复一条消息，消息可以是文字、
2021-04-12 15:32:39
2506
原创 小程序-----小程序综合实战（地理位置，基本框架，API）
小程序综合实战1. 创建项目创建文件MaoYan├── app.js ............................................ 小程序入口├── app.json .......................................... 全局配置├── app.wxss .......................................... 全局样式├── assets ..............................
2021-04-09 11:23:44
1372
原创 小程序-----小程序开发组件布局，数据绑定，事件
小程序UI开发布局创建一个小程序项目演示UI组件及样式。1. 适配众所周之移动设备种类较多，如操作系统有 Android、IOS、Windows Phone等，屏幕尺寸有 4寸、4.7寸、5.5寸等，甚至屏幕像素密码也存在差异，开发者不得不针对不同的操作系统和不同的屏幕尺寸进行处理。开发小程序不用担心操作系统的差异，小程序运行在微信中，微信有 Android版本 和 IOS版本，天然可以实现跨平台（操作系统）运行。为了保证小程序能够在任何尺寸的屏幕上都能正常显示，开发人员需要进行适配置处理，
2021-04-07 10:45:03
1754
原创 小程序-----小程序开发工具使用及流程文档说明
小程序基础1. 背景介绍微信是一个生态圈，包括即时通信、移动支付、社交媒体、游戏娱乐等多个领域，彼此之间紧密联系、互为支撑形成了一个强大的微信帝国。日常交流中所提到的微信更多是指的即时通信和移动支付，而我们即将学习的微信小程序属于社交媒体的组成部分。注：除了有微信小程序外，支付宝也如法炮制了小程序，文中提到的小程序如无特别说明，特指微信小程序。人们越来越多的将时间花费在了移动设备上，移动互联势不可挡。伴随而来的移动开发技术层出不穷：H5（Web App）即运行于移动设备浏览器的网页
2021-04-06 13:56:30
3203
原创 Git进阶使用----进阶用法及避免冲突
文章目录一、常用命令1. 代码常规保存2. git stash 临时保存3. git add4. git commit5. git push6. git pull二、分支管理1. 新建分支2. 切换分支3. 查看分支4. 合并分支三、解决冲突一、常用命令1. 代码常规保存程序员的开发习惯都是，在敲完自己认为的一段代码之后都喜欢Ctrl+S 保存起来.个人建议在代码之前做好代码差异比对，检查好提交文件的状如果代码修改保存后，不想保留git restore ‘文件名称’ 即可撤回查看文
2021-04-01 15:01:29
1806
原创 Git基础使用----远程仓库创建项目、查看 .git 隐藏文件
文章目录一、创建远程仓库1.打开GitHub二、使用步骤1.引入库2.读入数据总结一、创建远程仓库1.打开GitHub示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsimport warningswarnings.filterw
2021-03-29 17:26:09
2391
原创 Git基础使用----安装，配置，彩蛋(右键关联注册表)
文章目录前言一、Git下载二、Git安装1. 双击安装程序2. 选择安装路径3. 配置快捷方式4. 设置开始菜单中快捷方式的目录名称5. 选择编辑器6. 设置环境变量三、Git配置1. 配置用户信息2. 配置说明四、右键关联Git bash前言 Git是大多数程序员常用程序开发中常用的代码版本控制系统，它一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目，灵活运用各种命令可方便管理提高开发效率。一、Git下载IOS版安装路径window版安装路径二、Git安装提示
2021-03-24 18:43:53
2278
1
TA创建的收藏夹 TA关注的收藏夹
TA关注的人