前端
文章平均质量分 58
Charonmomo
这个作者很懒,什么都没留下…
展开
-
Antd Design的inputNumber实现千位分隔符和小数点并存
虽然通常英文的单词是由空格,标点符号或者换行来分隔的,但是 \b 并不匹配这些单词分隔字符中的任何一个,它只匹配一个位置。如果需要更精确的说法,\b 匹配这样的位置:它的前一个字符和后一个字符必须是\w (字母数字)和 \W (非字母数字),即匹配必须出现在 \w (字母数字)和 \W (非字母数字)字符之间的边界上。\b属于匹配位置的元字符,一般作占位作用,而不被捕获,同属于匹配位置的还有匹配行起始位^和行结束位$也是匹配数字, 不过这里匹配的是小数点后的数字, 有两个。这种数字也是满足匹配条件的,原创 2023-11-22 14:56:15 · 1328 阅读 · 0 评论 -
前端伪进度条实现(仿antd message使用react组件静态方法)
但这时候, 只能知道静态方法调用成功了, 没法通过静态方法去改变组件的状态, 比如进度条的 percent 和 status , 我尝试在静态方法里调用 SelfDevProgress(percent:100) 这种方式去传值, 会报错.react项目中, 有些页面加载很慢, 为了提升用户体验, 需要在前端做一个伪进度条, 并且把这个伪进度条封装成一个组件, 提供给多个项目使用.1. 必须给挂载的div设置一个唯一的id, 如果不给设置一个唯一的id,每次调用都会挂载一个div,这个div会重叠很多次;原创 2023-10-26 13:47:20 · 1281 阅读 · 0 评论 -
调用clearInterval(), 定时器仍在进行
把 timer 改成 useState 那种方式就可以了.我是在 react 的函数组件中遇到这个问题的,来清除定时器了, 但是发现定时器还在运行.在 fail() 函数中调用。原创 2023-10-26 11:21:31 · 474 阅读 · 0 评论 -
js制作柱状图的x轴时间, 分别展示 月/周/日 的数据
有个需求是要做一个柱状图, x 轴是时间, y 轴是数量. 其中 x 轴的时间有三种查看方式: 月份/周/日, 也就是分别查看从当前日期开始倒推的最近每月/每周/每日的数量原创 2023-09-20 16:52:05 · 524 阅读 · 0 评论 -
js正则校验特殊的不可见字符
表单的输入框,用户可能从Excel或者其他地方直接复制粘贴,这时候提交到后端会导致获取的用户输入中包含一些特殊的不可见字符,比如tab键或者制表符等,这时需要在前端对用户输入做一些检验,检查是否存在不可见字符。个字符(最后一个字符)都是不可见的(无法显示),但是它们都具有一些特殊功能,所以称为控制字符( Control。是控制字符(不可见字符),我们可以在正则中通过。这种格式是错误的,没法进行正常的校验。1. 校验是否含有特殊的不可见字符。校验是否包含这些字符的16进制。2. 检验是否含有不可见字符。原创 2023-05-25 15:33:22 · 2241 阅读 · 0 评论 -
nodejs处理xlsx文件生成json文件
nodejs处理xlsx文件有好几种方式,这里用的是js-xlsx库;原创 2023-05-16 14:19:24 · 2081 阅读 · 0 评论 -
react从零搭建按需加载的svg图标库过程(一)
这里 SymbolId 这一行可有可无,SymbolId对应的是使用时 use 标签的xlinkHref属性,也就是说如果采用了 SymbolId:‘icon-[name]’ 的配置,那么使用时的语句应该是 “icon-” 开头的;运行后发现页面是空白的,打开控制台发现是因为没有合理加载svg图标,这是因为webpack中本身就有对svg的处理规则,并且file-loader还有一个默认的地址。原理:svg-sprite-loader 会把svg 塞到一个个 symbol 中,合成一个大的 svg。原创 2023-03-27 09:29:13 · 1694 阅读 · 1 评论 -
react如何设置可自定义颜色的svg图标库(二)
经过上一篇的步骤,可以看到name这个需求已经实现了。关于颜色的处理上,有两种不同的需求:一是直接去除原来svg自带的颜色,所有的颜色都由用户重新设置(或有一个默认颜色);二是只有在用户传了颜色这个属性时才使用使用自定义的颜色,否则保留原来svg的颜色;(这个也是我的需求)针对这两种不同的需求,处理方案是不同的(仅是在使用了svg-sprite-loader的情况下)。第一种需求实现起来比较简单,第二种比较麻烦,下面分别讨论(有些情况我没有实践,所以只给了思路或参考)。原创 2023-03-28 10:42:36 · 1548 阅读 · 0 评论 -
表格内容单/多行展示(三)- antd table有padding值时该如何设置
我的项目中需要实现当表格内容过多时单行/多行展示的效果,之前找到的几种方式应用到我的项目中时都会多多少少出现问题。经过了一段时间的摸索,终于找到了一种使用起来样式不会错乱的方法。项目:antd4 + react。原创 2023-02-27 13:41:39 · 1584 阅读 · 0 评论 -
表格内容单/多行显示(二)- 表格有padding时,多行省略号展示不生效
给table加了padding属性后,之前的单行省略号显示不受影响,但是多行省略号显示出现问题,省略号出现了,但是下面多了一行。原创 2023-02-24 13:24:04 · 473 阅读 · 0 评论 -
表格内容单/多行展示(一)- 单行/多行显示的方法
table-layout:fixed;对表格内容处理,实现当表格内容过多时,单行/多行显示文件内容,并且原创 2023-02-23 16:10:23 · 2478 阅读 · 0 评论 -
antd滚动表格纵向滚动条问题
antd的滚动表格的纵向滚动条消失问题。原创 2022-11-25 11:16:32 · 3753 阅读 · 2 评论 -
div中加入内容会下沉
复现有这样一个布局.上半部分有三个div, 没有使用定位或浮动, 调整好布局后, 显示正常. <!-- 配置部分 --> <div> <!-- 展示部分 --> <div class="configPart"> <div class="showPart"> <div class="showSelectDiv"> <!-- &l原创 2022-02-28 16:49:12 · 2204 阅读 · 4 评论 -
vue 2.0项目中使用tinymce富文本框遇到的问题
安装Tinymce现在tinymce-vue最新版本是4.0,用的vue3.0的了,所以搭建的vue2.0项目要使用之前的版本 ( 安装指定版本 ).首先安装tinymce的vue组件,因为没有注册服务:npm install @tinymce/tinymce-vue@2.0.0 -S接着安装tinymce:npm install tinymce@5.0.3 -S当然也可以安装其他版本的.我的vue2.0项目一开始直接使用以下命令安装最新版的tinymce, 然后报错了. 如果是vue3原创 2022-02-10 13:35:42 · 6385 阅读 · 3 评论 -
前端跨域配置 axios.defaults.withCredentials = true; 无效的原因
背景前后端分离项目, 后端返回cookie的方式如下:在前端配置了 withCredentials = true :axios.defaults.withCredentials = true;但是cookie信息不能被浏览器保存下来. 虽然登陆接口返回了200, 但是登录实际上是无效的.这时候登陆接口的一些信息:原因网上的文章提到:如果要发送Cookie,Access-Control-Allow-Origin 就不能设为星号,必须指定明确的、与请求网页一致的域名。再看上面的原创 2022-02-08 10:37:28 · 14551 阅读 · 9 评论 -
TypeError: this.getOptions is not a function
更改less和less-loader的版本:npm install less@3.9.0 less-loader@4.1.0 --save-dev转载 2021-12-28 13:44:55 · 141 阅读 · 0 评论 -
el-autocomplete解决不显示下拉框列表问题
如图所示, 控制台中可以看到 results 中已经有了数据, 但是 cb(results) 却不能在网页中显示.产生原因:element-ui对于返回数据的格式有要求,必须是一个数组对象,并且属性名为“value”,将results中的属性名换成value就可以了.参考: 添加链接描述...原创 2021-12-23 13:52:14 · 2794 阅读 · 0 评论 -
闭包和作用域 (for循环中的setTimeout)
注: 本文内容参考 《你不知道的JavaScript(上卷)》思考有如下代码:for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); }正常情况下,我们对这段代码行为的预期是分别输出数字 1~5,每秒一次,每次一个。 但实际上,这段代码在运行时会以每秒一次的频率输出五次 6。这是为什么?首先解释 6 是从哪里来的。这个循环的终止条件是 i 不再 &翻译 2021-12-13 11:17:45 · 368 阅读 · 1 评论 -
vue项目中使用jsplumb遇到的问题
安装jsplumb:npm i jsplumb注意jsplumb要小写 , 用 npm install jsPlumb --save 这种命令会报这样的错的: ‘jsPlumb@latest’ is not in the npm registry.引入(1) 可以在main.js中将jsplumb挂在vue下便于页面获取import jsPlumb from 'jsplumb'Vue.prototype.$jsPlumb = jsPlumb.jsPlumb(2) 在要使用的页面引入:i原创 2021-11-24 16:33:29 · 3117 阅读 · 3 评论 -
jsplumb - Cannot establish connection - source does not exist
可能的原因有几个:source 或者 target 的元素 id 不存在id 是中文原创 2021-11-24 16:14:54 · 2077 阅读 · 0 评论 -
js回调函数:js先执行完一个函数后再执行下面的逻辑或者方法
错误的例子: 获取小明的年龄function getAge(name){let age=10;return age;}//需要调用的方法function html(){let strHtml=``let age=getAge("小明");//在此希望调用获取年龄方法得到小明的年龄strHtml="小明的年龄为:"+age;console.log(strHtml);}上面的列子 有可能在获取到年龄之前就执行了输出 (获取不到年龄就执行了下面的代码)输出为: 小明的年龄为:unde转载 2021-11-24 16:11:41 · 1574 阅读 · 0 评论 -
jsplumb 实现网页高亮文本连线 - 文本标注
关于网页文本高亮的详细内容, 可以参考我之前的两篇文章, 详细记录了我实现网页文本高亮的过程:文本标记1 - 高亮标记多个指定位置的文本文本标记2 - 用户从网页上选择文本高亮本篇文章主要介绍的是如何在网页中实现几个文本之间的连线和标注. 类似下面图片展示的功能:最初看到这个需求时一头雾水, 没有什么思路. GitHub上查到的代码参考的价值也不是很大. 好在查了一天资料以后, 主要确定了两种实现方式:jsplumb 插件 (大体功能能实现, 但网上对于jsplumb的介绍大多都是针对流程图的原创 2021-11-22 16:02:34 · 3337 阅读 · 4 评论 -
文本标记 - 用户从网页上选择文本高亮
在上一篇文章 文本标记 - 高亮标记多个指定位置的文本 中, 说明了如何高亮后台返回的指定位置的多个数据. 现在解释下一个需求: 用户在高亮后台返回的数据的基础上, 从页面上选择文本高亮, 并且在表格中显示文本上篇文章说到高亮的效果: 一般都是给指定的文本包裹一个标签 ( 如 ), 在给这个标签设置一个样式 ( 比如添加背景色 ), 这是实现这个需求的基础.ps: 如果只有用户从网页上选择文本的需求, 可以考虑用 web-highlighter 插件, 比起自己手写方法来要简便一些.首先介绍一下这个原创 2021-11-19 16:28:40 · 1414 阅读 · 2 评论 -
文本标记 - 高亮标记多个指定位置的文本
需求现在有这样一个需求: 根据后端返回的起始位置和结束位置的下标高亮多个指定位置的文本下面我们分析一下这个需求需要用到的技术有哪些:高亮高亮效果比较简单, 一般都是给指定的文本包裹一个标签 ( 如 <span> ), 在给这个标签设置一个样式 ( 比如添加背景色 ), 就可以实现高亮的效果了.找到指定位置的文本这个问题很有迷惑性, 最初给人的感觉很简单: " 这不就是一个切割字符串的问题吗? slice(), substr() 和 substring() 这些方法随便用一个不原创 2021-11-18 15:14:58 · 1669 阅读 · 0 评论 -
接口参数名使用变量 传递参数
背景有这样一个接口, 属性1 和 属性2 分别对应 属性列表 中的参数, 也就是说 属性1 和 属性2 是个动态变化的变量.思路代码items 是个对象数组, 格式为:[{name: "", value: ""},...]解析: const entityArrList = this.items entityArrList.forEach(arrObj => { console.log("arrobj是:")原创 2021-11-10 18:46:04 · 614 阅读 · 0 评论 -
TypeError: Cannot read properties of undefined (reading ‘0‘)
报错信息产生原因要读取的内容处在undefined状态, 也就是说还没有加载出来, 所以会报错.举个例子, 我的代码中报错的原因是: 还没有加载 form.属性名 这个数组, 所以获取 form.属性名[i] 就会报错. 如果下面是 form.属性[i] 的话就不会报错了....原创 2021-11-10 16:48:20 · 53463 阅读 · 0 评论 -
vue formdata传值给后台时参数为空
在vue里面使用formData的时候参数值为空,是因为axios是进行了二次封装,所以传递表达的时候会传递一个空表单过去axios在进行二次封装的时候回影响到原来的表单提交或者文件上传, 所以可以用原生的发请求// list 是一个对象数组export const orinCatelogue = (list) => { let fd = new FormData() for(var i=0;i<list.length;i++) { console.log(list[i]原创 2021-11-05 16:06:42 · 5081 阅读 · 0 评论 -
实现对话框添加多行内容
<el-form-item style="width: 100%" label="属性" prop="属性"> <div class="item" v-for="(item, i) in form.属性" :key="i"> <el-row :gutter="20" style=" ...原创 2021-11-04 15:57:45 · 575 阅读 · 0 评论 -
forEach 跳出本次循环 (break不能使用)
可以用try-catch的方法跳出本次循环原创 2021-11-04 14:54:38 · 549 阅读 · 0 评论 -
el-select下拉框动态获取及默认选中当前元素
<el-col :span="2"> <el-select placeholder="本体库选择" v-model="ontoList.name" style="width: 130px" @change="changeOnto(ontoList.name)"> <el-option .原创 2021-11-04 11:07:49 · 1615 阅读 · 0 评论 -
elementUI添加一个搜索框
在一行中添加一个搜索框<el-row> <el-col :span="6" style="float:left; margin-left: 45vw;width: 270px; hight: 40px;"> <el-input type="text" prefix-icon="el-icon-search" v-model="kb_content" .原创 2021-11-03 09:58:48 · 7586 阅读 · 0 评论 -
js - 区分空字符串和null
背景描述有一个接口比较特殊, 参数为空时只有传 null 的时候才能正确返回结果, 如果传的是 "" 就获取不到数据.解决方法传参的时候可以通过 typeof 判断是否是空字符串:label: typeof(this.name) == 'string' ? null : this.name...原创 2021-11-02 15:09:36 · 784 阅读 · 0 评论 -
vue 改变网站图标favicon.ico谷歌浏览器不显示的问题
描述替换项目中的 favicon.ico 以后, 在其他浏览器中可以正常显示. 谷歌浏览器中清除了缓存但还是不能显示替换以后的 favicon.ico 图标.index.html 中的语句:<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />解决方法谷歌浏览器缓存的问题, 用 Ctrl + F5 强制刷新一下浏览器就可以了....原创 2021-11-02 10:57:11 · 1882 阅读 · 2 评论 -
Syntax Error: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
错误信息原因版本不匹配导致的解决方法安装使用下面两个版本的sass和sass-loader:npm install sass-loader@10.1.1npm install node-sass@4.14.1原创 2021-10-29 09:51:45 · 2975 阅读 · 0 评论 -
el-form中保存时axios发请求不进入then进入catch
问题描述今天接手之前同事写的代码的时候遇到一个问题:点击 编辑 中的 保存按钮 或者是 删除 的时候, 请求可以发送成功, 但是控制台总会显示报错信息.页面上的elementUI提示也是 $message.error 形式的.请求发送之后的 .then 也进不去, 反而会显示 .catch 中的内容.然后我就开始百度:得知产生这种问题的原因主要有以下几种:当axios请求完成后走的是then的代码块,如果then代码块中存在错误代码信息,这时就会进入catch中>抛出异常(注原创 2021-10-28 14:11:34 · 1734 阅读 · 0 评论 -
elementUI表格el-table中处理@row-click和按钮的关系
背景有一个使用elementUI制作的表格, 点击每行可以查看其他信息 (@row-click),每行末尾有编辑和删除两个按钮, 可以对这一行进行操作.问题添加 @row-click 事件后, 编辑 和 删除 无法点击, 点击这两个按钮也会查看详细信息.解决方法在编辑 和 删除 这两个按钮的点击事件上加上.stop, 阻止向上冒泡.@click.stop=" "例如: <el-button type="button"原创 2021-10-28 09:06:48 · 2570 阅读 · 2 评论 -
v-if 和 v-show 的区别
以前只知道v-if不会保留dom元素, 但v-show会, 也没单独试验过. 我以为就是设置了不可见而已, 宽高什么的都在.今天才知道 v-show 只是保存了一个dom元素而已, 就是控制台查看源代码可以看得见, 但是页面上是没有这个元素的....原创 2021-10-27 15:29:22 · 137 阅读 · 0 评论 -
elementUI设置图标元素的大小
elementUI 的图标大小是由 font-size 控制的<i class="el-icon-circle-plus-outline" style="margin: 0 10px; font-size: 20px; color: green" @click="insertAttr"></i>原创 2021-10-27 14:52:21 · 9841 阅读 · 0 评论 -
Promise函数执行顺序
首先执行同步代码, promise() 构造函数中的代码是同步代码, .then和.catch里的是异步代码.执行顺序:已申明的函数–>new Promise–>setTimeout;在Promise函数中后执行.then()函数; testFunction() { console.log(`console 1`); setTimeout(() => { new Promise(() => { con原创 2021-10-14 22:42:56 · 1379 阅读 · 1 评论 -
解决echarts图表不能屏幕自适应的问题
问题描述有时候变换屏幕宽度, echarts图表不会立即随着屏幕宽度变化, 需要重新刷新后才能适应.解决方法需要在图表数据初始化函数之后,再resize()一下。window.onresize = function () { productChart.resize();};...原创 2021-10-13 15:30:07 · 3499 阅读 · 0 评论