- 博客(34)
- 收藏
- 关注
RSS订阅原创 解决触屏端，手机键盘按enter自动提交表单的问题
背景：触屏端，手机键盘按enter会触发表单提交，想修改为禁止提交，点击提交按钮时才提交。解决方法：在form元素上添加onkeydown事件 捕捉enter行为并阻止。
2023-02-06 15:27:15
377
原创 swiper第一个、最后一个滑块按钮disabled时（.swiper-button-disabled），点击触发下层点击事件的问题
4.检查左右两种状态的按钮，发现z-index值一致，说明。5.发现.swiper-button-disabled按钮。后，不再触发图片点击事件，问题得到修复。3.由于我的轮播图中，，导致点击左边按钮时，
2022-08-24 17:29:00
1369
2
原创 react hooks无法获取到最新值问题
无法获取最新值的写法：在state中定义初始值：import React, {useState, useEffect} from "react"; const [type, setType] = useState(0);2：通过setType方法修改type：<div onClick={()=>setType(1)}>3：在当前组件中—— 能正常获取到 type最新值4.将type传入子组件中操作——子组件获取不到最新值解决方法：一、通过 useEffe
2022-05-25 11:52:54
2453
1
原创 判断对象是否存在某属性，但属性值可能为0，被判断为不存在，解决方法
情景:当需要判断data中的a属性存在时通常会使用data.a或!!data.a去判断值的存在性但此时如果data.a存在，但是值为0，可能会被判断为不存在：进而无法进入data.a存在的条件内部此时可以使用：data.hasOwnProperty('a')注意属性名为字符串。...
2022-03-28 16:10:38
1212
原创 element-ui + vue 实现在外层 父对话框|父组件 里点击打开 子组件|子对话框
父对话框：<template> <div class="father"> <el-dialog :title="father title" :before-close="handleClose" :visible.sync="dialogVisible"> <div class=""> 外层对话框内容
2022-02-16 11:45:26
788
原创 【最简单】将两个数组/对象合并成一个数组/对象：数组的拼接与对象的拼接【区别】
**1.拼接数组: concat()**[1,2,3].concat([4,5])//结果：[1,2,3,4,5]**2.拼接对象： … 展开运算符**const obj1 = {"name":"zs","age":"18"}const obj2 = {"nickName":"ZS","color":"red"}{...obj1 , ...obj2}//结果：{"name":"zs","age":"18","nickName":"ZS","color":"red"}...
2021-12-17 17:16:52
1309
原创 前端开发中数组的方法：join()和split()的区别使用
前端开发中数组的方法：join()和split()的区别使用其实二者对大部分同学来说没有区分的必要性，但由于本人在工作中总是傻傻分不清，特区分：join() 方法用于把数组中的所有元素放入一个字符串给数组使用---------变成字符串点击此处去往join() 方法官方释义[1,2,3,11,22,33].join(',') // "1,2,3,11,22,33"join里面就是分隔符，可随意定义：join（""）省略分隔符时------变长整串:split()方法用于把一个字符串分割成
2021-11-23 10:45:38
1664
原创 2021年6月前端面试题目整理（个人面试遇到的问题）
2021年最新前端面试题目整理最近面试的一些记录 题目和答案陆续整理中，没整理完的请见谅。遇到过一些问题常规、结果乐观的面试，也有遇到全程自闭的。最终复盘，收集问题的时候，觉得很感激一针见血的面试官，虽然过程尴尬，但得到了鞭策和自己的知识盲区，这就是最大的收获。本人2020年本科毕业，2020年6月至今(2021年6月)都在同一家公司工作，也就是工作经验一年，公司一家，公司前端框架是react+mobx+antd+typescript。以下是整理出来的面试题目：部分答案会引用网络上一些比较全面、清
2021-11-23 10:23:34
819
原创 删除本地文件后，提交代码时，SVN显示missing图标，导致代码不能提交的解决方法
删除本地文件后，提交代码时，SVN显示missing图标，导致代码不能提交的解决方法如图，该文件在本地删除后，提交代码时，显示missing状态，并且无法提交。这是由于本地删除后，远程仓库并未删除该文件，导致的问题。解决方法，选中该文件，右击，点击删除，如下图：点击强制删除，如下图：操作成功后，文件后的图标会由？变成D 代表该文件已被删除，随后提交代码即可。...
2021-11-23 10:08:13
1696
原创 javascript高精度计算解决方案
javascript高精度计算存在一定缺陷，在运算时可能会出现很多位小数，例如：为了解决这个问题下面有几种方案可供参考：方案一：使用number-precision库进行处理方案二：使用bignumber.js库进行处理：类似上面两种封装好的函数库还有很多，可以自己去查找更方便的。如果不想引入外来的库，可以考虑使用下面的函数进行处理：（以乘法为例，加减除可参考这里）方案三：/** * @description 精确乘法 处理js高精度计算缺陷 * @param num1 * @par
2021-09-07 13:48:15
3110
原创 react中，input的onchange事件搜索功能的节流方法，很简单~（_.debounce）
react（typescript）中，input的onchange事件搜索功能的节流方法，很简单~第一步 引入相关包：import _ from "lodash";第二步 定义相关方法：mapDebounceHandler = _.debounce(this.searchFn, 500); //节流//实际要执行的的搜索事件 searchFn = () => { // console.log("搜索了"); //相关代码 };第三步 在in
2021-04-09 17:01:28
3939
原创 antd select组件相关——多选下拉框的前后端传值问题
有下面一个select，模式是多选，要求给后端传所有选中项，格式为“1，2，，… ，n”<Select mode="multiple"//多选 value={this.state.category} showSearch={false} showArrow={true} defaultValue="" onChange={this.handleCategoryChange}> {this.cat
2021-03-18 18:18:55
2409
2
原创 antd select组件相关——传值是数字、显示是文字、下拉框设置了value导致placeholder不显示等问题（较基础）
antd select组件相关——传值是数字、显示是文字、下拉框设置了value导致placeholder不显示等问题（较基础）首先看要求：有placeholder, 显示四个选项，选择一个选项时，传给后端的是数字类型。数据是下面的结构：teamOptions = [ { label: "0-10人", value: 1 }, { label: "10-50人",
2021-03-17 10:49:51
3693
原创 前端常用正则表达式方法的包装之——2.只允许输入中英文和数字
函数：export const filterSpecialChar = (value: string) => { return value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9_]/g, "").trim();};使用：<Input onChange={(e: any) => { this.setState({
2021-03-11 19:01:58
1055
原创 前端常用正则表达式方法的包装之——1.过滤特殊字符
函数：export const filterSpecialChar = value => { var reg = new RegExp('[\\\\",，:：。.?？<>|、/*“”＼／：＂＇]'); var rs = ""; for (var i = 0; i < value.length; i++) { rs = rs + value.substr(i, 1).replace(reg, ""); } return rs;
2021-03-11 16:26:39
510
原创 js实现前端页面上的返回顶部按钮-最简便的方法~（JavaScript+CSS）
前端页面的返回顶部按钮，位置随着页面滚动保持在可视区，点击即返回顶部实现方法：JavaScript： <a class="scroll-to-top-btn" href="javascript:void(0);" onclick="document.body.scrollTop=document.documentElement.scrollTop=0" > <img src="./scroll-to-
2021-03-01 14:02:39
832
原创 什么是TDK？什么是网站的TDK？扫（myself的）盲
开会时听到产品谈论TDK的时候一脸茫然，略查了一下深感作为一个前端居然不知道这个！TDK，即 title、description、keywords，这些描述性文字对一个网站首页来说是很重要的。更多介绍可以查看这篇博客【侵删】...
2021-02-25 21:13:06
1485
原创 MAC环境下安装nginx
1.打开终端2.下载brew：执行/bin/zsh -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)”enter后如图：随意选择一个下载源，例如1，enter等待其执行完成，如图：如发现下载速度慢到无法接受，可按提示重新选择下载源（中科院的有点慢了，不知道其他的怎样，但感觉都差不多）按提示完成所有步骤即可。感叹下界面太友好了，提示清晰引起舒适。...
2021-01-26 10:45:55
207
原创 通过正则来控制input只能输入中英文某类字符
背景：react + antd目标：通过正则来控制input只能输入某类字符： state={ name:"" } handleNameChange = v => { this.setState({ name: v.target.value });//*1:input的value发生改变时，将state中的name设置为改变后的值 };定义一个过滤方法，以只允许输入中英文为例： filterName = (value = "") => {
2020-12-29 14:31:21
2610
原创 antd的下拉菜单dropdown组件，如何控制点击空白处时，二级菜单一层一层收起，且阻止页面其他点击事件
前言：下文中提到的下拉框、对话框以及其他UI组件都是antd UI库中的，更多操作请看antd官方文档API，点击此处跳转至antd的下拉菜单dropdown组件官网。情景/目标：工作中遇到的需求：1、当下拉菜单展开多层时（如下图 有二级下拉菜单展开），点击页面其他地方，只是收起二级菜单，一级菜单不收起，再次点击收起一级菜单。antd默认点击别处，展开的菜单全部收起2、当页面中有下拉菜单展开时，点击空白处任何地方，都是收起一层下拉菜单，页面中下拉菜单全部收起后，点击、双击等操作才会出发页面.
2020-11-10 17:00:23
11496
原创 使用moment.js格式化时间时，如何在条件不同时，显示不同语言格式的时间（中/英文）
使用moment.js格式化时间时，如何在条件不同时，显示不同语言格式的时间（中/英文）情景/目标：当判断到条件 I 成立时，将时间格式化为中文格式：如 2020年1月1日 23:59当判断到条件 II 成立时，将时间格式化英文格式：如 Jan 1, 2020 23:59第一步：取到时间戳 假设时间戳是变量 time第二步：用moment.locale设置时间格式化为指定的语言格式，如：language === "en-US" ? moment.locale("en") : mo...
2020-11-10 14:23:49
3974
原创 前端项目：怎么更新项目的iconfont
前端项目：怎么更新项目的iconfont情景：ui制作了新的icon在iconfont上面，如何引入更新到项目中1.UI库中的图标可正常查看：2. 点击下载至本地3.解压缩包4.打开解压后的文件夹，其中这两个是例子，如果不需要查看可以直接删除，我们取 其他文件 复制5.找到你项目中的font文件夹，一般在publish目录下：6.font文件夹中又一个function文件夹，注意不要操作与function同级的这些文件（红色）7.点开function文件夹，将里面的文件替换为之前下
2020-11-09 20:31:32
2054
原创 input限制最多输入字数哪个方法最简单？
input限制最多输入字数哪个方法最简单？吭哧吭哧写了判断之后发现大佬都是这么写的：<input max-length=500 />答应我，学会它，不要再写判断了！！！！！类似的 还有几个好用的属性：max-widthmin-widthmax-heightmin-height简单的属性屡试不爽，分享给还不知道的同学！...
2020-10-24 17:42:17
1221
原创 滚动条不支持点按拖动了？什么原因看这里！
标题滚动条不支持点按拖动了？什么原因看这里！<h6工作中遇到问题：滚动条不支持拖动了，只能在滚轮滑动时候生效。按理说，滚动条有以下自带功能：上下滑动查看内容时出现滚动条并可滑动鼠标移到滚动条区域时出现滚动条滚动条出现时点击滚动条可以上下移动工作中发现只有功能1正常，2和3都失效。检查发现原因是：层级不够，被遮盖了，调整z-index值即可当时找了很久问题，因为明明这里没有元素层级比滚动条高！层级不够有多种原因，一是被其他dom元素遮盖，这个一般好排查。之所以拿来说这个问题是因为，
2020-10-24 16:30:45
4002
1
原创 如何给表格的某一列写css效果？最简单方法在这里！
如何给表格的某一列写css效果？——工作中遇到的问题：需要给antd的Table表格第二列增加hover效果试过了一些方法后，发现最简单的方法是：td:first-child 表示第一列td:first-child + td 表示第二列td:first-child + td + td 表示第三列以此类推，简单明了。如上图 代表第二列有hover效果，如此只要能找到某个td， 就能找到那一列了。...
2020-10-24 16:13:55
443
原创 自己写一个过滤特殊符号的正则表达式方法
自己写一个过滤特殊符号的正则表达式方法export const filterChars = value => { var reg = new RegExp('[\\\\",，:：。.?？<>|、/*“”＼／：＂＇]'); var rs = ""; for (var i = 0; i < value.length; i++) { rs = rs + value.substr(i, 1).replace(reg, ""); } r
2020-07-28 11:06:21
365
原创 需求：当输入框失焦时，判断输入框是否为空。如果不为空，则修改为当前输入框的值；如果为空，则提示错误信息，且保持原值。
需求：当输入框失焦时，判断输入框是否为空。如果不为空，则修改为当前输入框的值；如果为空，则提示错误信息，且保持原值。onBlur={()=>{ if(!this.state.name){//如果state中的name为空 this.setState({ name:project.name //将state中的name设为project.name（原值） }); viewStore.errorOnce( currentLanguage.get("错误提示信息") )
2020-07-28 10:50:17
650
原创 IF-ELSE语句的高级用法（简便写法）----前端工作问题整理
IF-ELSE语句的高级用法（简便写法）if ( (A && B && C< D) || (A && B && D>E)) { X ? Y : Z H }AAAAAAAAAAA如果（if）------------A 为true 而且B为true 而且C<D ，执行 X ? Y : Z 再执行 H或者（else if
2020-07-09 11:13:06
725
原创 while do … while和 for 语句三种循环语句该用哪个？
三种循环语句的横向对比和小结循环有 3 种写法，while 语句、do … while 语句和 for 语句，但最常用的是 for 语句。for 语句可看作是另外两种循环语句的“改进版”。本质上，三种循环的写法可以相互替代。当循环次数不明确的时候，可以使用 while 语句或 do … while 语句。较为方便、简洁。而当循环次数明确时，不妨采用 for 语句，更加简洁明了。...
2019-12-09 17:47:31
613
原创 JavaScript基础：一元运算符中“先自增”和“后自增”问题
**一元运算符中“先自增”和“后自增”问题**一元运算符：只有一个操作数的运算符，比如：num++自增运算符（++）先自增：++num后自增：num++相同点：代码执行完，数值都会+1 var num = 10; ++num; console.log( num );// 11 var num = 10; num++; ...
2019-11-26 14:02:47
886
原创 JavaScript变量命名规则规范
变量命名的规则：一、必须遵守：变量名可以由数字、字母、下划线、$组成，但是 不能以数字开头区分大小写（大写的变量和小写的变量是不同的变量）变量名不能是关键字或者保留字：以上词汇不能用作变量名，不用刻意记忆，变量名命名错误时，会有错误提示，换一个即可。二、建议遵守（不遵守一看就不专业）变量名需要有意义，即语义化，增强代码可读性，比如存储年龄用age，姓名用name，防止过段时间...
2019-11-25 20:23:18
918
3
原创 JavaScript中变量声明的方式
变量使用前需要先声明 ，JS中统一用var来声明一个变量：变量声明有三种方式：1、先声明，再赋值var a;//变量的声明a = 18;//变量的赋值2、同时声明和赋值var a = 18;3、同时声明多个变量和赋值(注意，多个声明和赋值之间用逗号隔开)var a = 18,b=20;注意：以下几个都是不规范的写法！！4、不声明，直接赋值此时浏览器...
2019-11-25 20:08:41
552
原创 一文介绍JavaScript中的变量提升到底是什么
JavaScript必备细节知识点是时候搞清楚JavaScript中的变量提升问题了！JS是一门弱解释性语言，这意味着面对一个文档，JS会选择先解释再执行。通俗来讲，就是先通篇扫描所有js代码，将所有的声明都提升到该作用域的最前面，再去考虑需要操作的代码。这里所有的声明包括：- 变量的声明console.log(a);var a=5;经过变量提升 上面代码在执行时的逻辑是这样的：...
2019-09-24 15:32:48
161
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人