工作分享
chen_sir_sh
忙于生活,暂无个人简介。
展开
-
后端返还二进制excl表格数据时候,如何实现在前端下载表格功能及出现表格打开失败的异常处理。
后端返还一个二进制流的excl表格数据,前端需要对其解析,然后可提供给客户进行下载。思路:把二进制流数据转换给blob对象,然后利用a标签进行前端下载。以上问题需要更改一下接口请求数据的返回方式,如果正常情况下就可以解决下载问题。这样就可以解决下载的问题了。原创 2024-04-01 20:53:53 · 358 阅读 · 0 评论 -
TS在调用接口和传入数据时定义数据类型的使用方法
ts实际开发定义数据类型原创 2024-03-22 15:43:19 · 276 阅读 · 0 评论 -
vue学习笔记——Vue3循环生成表单时,对每一行新生成的数据添加表单验证的方法
把rules的验证规则循环写在element ui的el-form-item的标签上,动态绑定prop的值,使用index生成不同的prop来进行动态绑定。每次添加一个人员的时候,就是增加一个对象push到数组内,进行循环表单验证。在form表单内,动态生成一个数组类型的一组数据,要求对生成的每一组数据内容进行表单验证。例如动态添加人员,并对每个人的人员的信息输入框进行表单验证。原创 2024-03-22 11:08:51 · 464 阅读 · 0 评论 -
Vue3+ts获取props的值并且定义props值的类型的方法。
1.引入withDefaults模块,给defineProps绑定默认值。以上vue+ts对于props传值的写法。2.定义Props传输值的类型。3.给props的值设置默认值。原创 2024-01-09 11:03:57 · 969 阅读 · 0 评论 -
git commit提交代码的时候,出现eslint校验时,如何直接暴力跳过检测提交代码
因为接到一个项目,里面有各种eslint代码校验,导致提交了很久都没提交上。想找一个暴力的方法直接提交。可以直接在命令行或者soucetree进行提交代码了。找到/git/hooks/pre-commit文件。找到项目的根目录上,原创 2023-08-25 10:23:08 · 772 阅读 · 0 评论 -
读取文件地址时,文件内容带有特殊字符时无法找到文件,自动打开一个空text文件。
在读取文件时,有时候会无法打开文件,自动一个空的text文件,原因可能就是文件中带有特殊字符,在进行url转义的时候,导致编码后无法找到指定文件,最后报错。encodeURIComponent(path)的方法,对链接进行转义。在进行url地址的时候,可以使用。原创 2023-08-18 15:48:02 · 227 阅读 · 0 评论 -
解决使用element ui时el-input的属性type=number,仍然可以输入e的问题。
其他的中文特殊字符都不可以输入,但是只有e是可以输入的,原因是e也输入作为科学计数法的时候,e是可以被判定为数字的,使用element ui时el-input的属性type=number,仍然可以输入e,但是有些场景是需要把e这种情况屏蔽掉的,我们可以使用如下的方法。在进行键盘事件输入时,进行监听,禁止e的输入。通过以上方法就可以解决。原创 2023-08-18 13:53:55 · 2430 阅读 · 4 评论 -
vue3 兄弟子组件相互调用方法的实现思路及解决方法
再在B组件内发射一个自定义事件,在组件C接受这个自定义事件的时候,进行A组件内的表单验证函数,书写一个回调函数(返还想要的参数,例如表单是否验证成功的布尔值)。vue实际开发过程中,可能需要在某一个子组件调用另一个子组件的方法,从而实现业务需求。最后在B组件内接收在这回调函数所返还的值,进行自己的业务逻辑代码的书写。利用共同的父组件C,我们可以在C组件通过ref来调用A组件的方法。如上就涉及到到组件B需要调用组件A的form验证方法。以上代码是逻辑实现,仅供参考。例如以下的一个业务场景。原创 2023-07-18 15:22:34 · 3559 阅读 · 2 评论 -
Vue3使用i18n插件实现多种语言切换的功能
i18n.ts为翻译文件的入口文件,此文件需引入全局main.ts文件内。index.ts为范围文件内容的导出文件。原创 2023-06-30 14:33:26 · 1344 阅读 · 4 评论 -
vue开发时,后端一次性返还过多数据时,利用slice方法对数据进行懒加载,使table滚动条滚动到底部时加载数据。
在处理后台返还数据较多时,前端不可能一次性把所有的数据加载在table列表内,我们可以监听滚动条,前端利用slice方法,来截取数据,从而 进行数据懒加载的实现。通过以上方法可以简单实现数据的懒加载。原创 2023-05-06 10:05:33 · 585 阅读 · 0 评论 -
前端开发处理企业微信浏览器时,开启企业微信浏览器调试模式的方法。
windows:快捷键 ctrl + alt + shift + D,进入调试模式;mac:按下command+shift+control+D进入调试模式。点击右键,showDevTools 就可以进入调试模式了。原创 2023-04-27 16:38:05 · 1634 阅读 · 0 评论 -
vue3使用element ui plus实现文件上传功能,可实现自定义处理上传列表,文件类型限制。
有的时候会对element ui 的上传文件功能模糊,简单做一个思路梳理和组件使用。代码内贴有注释,详细介绍代码使用规则。原创 2023-04-21 11:04:34 · 4099 阅读 · 0 评论 -
原生js和vue实现页面滑动时固定某一元素到底部
直接上代码,代码内有注释。原创 2023-04-07 17:34:57 · 734 阅读 · 0 评论 -
uni-app上传文件报错解决方案:error:ReferenceError: FormData is not defined;
在uni-app内,提供了一个uni.uploadFile的方法,可以把获取到的临时的文件url来进行传输, 然后就可以实现文件的上传功能了。// 上传图片 通过uni-app的uni-file-picker组件 函数返回。微信小程序内没有FormData这个对象,FormData针对的web,//调用uploadFile方法来进行图片的转换。我们通常会这样来进行图片的接口传输。然后把fd作为参数进行传输。//需要传图片的后台接口。原创 2023-03-01 17:34:28 · 3658 阅读 · 0 评论 -
前端Vue开发,多关键字搜索时,搜索结果高亮显示(解决输入英文时,会错误的把html标签渲染的问题)
html标签,这个时候把html标签转化为一个特殊的符号,把这些所有的特殊符号的代表内容放如到一个数组内,再紧接着高亮渲染html标签,完成后,把原先特殊符号进行替换,依次替换成需要显示的html标签,即可。输入英文字符时,把html标签渲染出来的问题,比如在进行多关键字搜索时,可能会进行a;因为是多关键字搜索,首先考虑的是把关键词转换为一个数据,把关键词和文本信息进行一次循环比对,发现是重复的,就进行高亮显示,如果之前的第一个关键词已经关键词显示,那么此时文本已经存在了。//符合的html定义一个数组。原创 2023-02-20 14:30:06 · 1027 阅读 · 4 评论 -
Vue2和Vue3中常用的父组件调用子组件的方法。
子组件父组件。原创 2023-02-16 15:47:17 · 2216 阅读 · 0 评论 -
Vue2和Vue3时,利用Object.assign()方法对对象数据进行初始化或置空功能的实现。
点击新增按钮进行form表单的输入填写,当再重新打开弹框时,需要把弹框的内容重置。//this.$options.data() 获取该组件初始状态下的data。或者在实现重置按钮功能的时候,需要对某些数据进行置空的操作。//this.$data 获取当前状态下的data。通过vue2的内置方法来进行实现。原创 2023-02-15 17:04:05 · 3146 阅读 · 0 评论 -
在使用element ui的form表单验证成功,但是点击提交没有进入validate方法的解决方法。
在对input的值都正确的进行验证后,发现点击提交按钮,没有进入element ui的validate方法,通过逐步的调试,在使用自定义验证规则的时候,没有使用callback的回调,这样就导致无法进入validate方法。原创 2023-02-03 16:48:02 · 1138 阅读 · 0 评论 -
把有时分秒的时间字符串转换为数字的时间戳的方法。
【代码】把有时分秒d额时间字符串转换为数字的时间戳的方法。原创 2023-02-03 15:28:36 · 553 阅读 · 0 评论 -
解决使用Element Ui的走马灯Carousel时,当内容长度为2时循环方向异常的问题。
但是当我们启用下指示器时,就会出现4个指示器,这样就会出现问题,我们可以判断当前是否是属于第一组数据还是第二组数据,通过class类名,显示或隐藏下方的指示器,该方法只针对两个内容出现的方向问题。使用element ui的走马灯Carousel的时候。当内容数量大于2时,可以正常显示,我们可以直接复制一份当前的数据,进行当前的循环操作,这样就可以解决问题。//当为第一组数据的时候,打开当前的指示器,隐藏第二组数据的指示器。//当为第二组数据的时候,打开当前的指示器,隐藏第一组数据的指示器。原创 2023-01-31 16:09:03 · 1848 阅读 · 0 评论 -
使用Element-Ui-Plus时,对select-v2进行自定义操作,可以自定义添加筛选后无数据的选项进行添加。
在最近的开发需求中,需要对element-ui-plus的select-v2的组件进行自定义的改装,即在搜索状态完成后,select-v2提供了一个属性方法,即allow-create的属性, 为了使 allow-create 正常工作,但是我们发现,使用这个属性后,如果输入的是已经存在的。使用自定义的空状态的插槽,设置一个添加按钮,监听该按钮,当发现无搜索数据时,点击添加按钮,就把。如果发现无搜索内容,可进行自定义的进行添加当前的select的input框内。当前的input的值替换为搜索框输入的值。原创 2023-01-13 14:50:41 · 2175 阅读 · 0 评论 -
解决使用element-plus时使用el-select-v2组件时,选中后无法移除focus的状态的方法。
我们可以使用element-ui-plus的el-select-v2的组件,实现复合搜索和下拉框的功能。原创 2023-01-12 16:19:40 · 2294 阅读 · 0 评论 -
解决使用js使用toFixed保留小数以及进行js的加减乘除运算时浮点数精度的问题。
可是小数转成2进制的时候,因为要对数据乘2直到取整,所以像0.5这种数字,可以很快计算得到2进制结果,但是0.1和0.2这样的数字,是永远不可能计算得到准确的2进制结果的,因为一直乘2,就没有得到整数的时候,此时在转换2进制的过程中,会形成无限死循环。计算机内部在存储无限死循环数据时,必须要有一个限度,采取舍去的原则,所以,0.1和0.2在计算机内部存储的对应的2进制数字,本来就不精准,所以相加得到的2进制结果,也就不精准了,那转换成10进制后,是会有一定的误差的,所以结果不是精准的0.3。原创 2022-12-23 16:16:12 · 669 阅读 · 0 评论 -
原生JS监听鼠标右键事件,禁用默认事件,绑定新的自定义标签的方法
最近在开发的时候,需要对鼠标右键做一个监听,根据查阅文档发现我们可以使用oncontextmenu来对右击事件进行监听,如果要监听全局的话,直接使用window.oncontextmenu来进行绑定。首先我们要使用e.preventDefault();禁用的默认的右击事件,然后再添加我们的自定义的内容;原创 2022-12-19 16:31:14 · 3390 阅读 · 0 评论 -
原生js常用的方法(未完待续)
element.getAttributeNode(‘属性名’);//返回指定元素的属性名和属性值。element.getAttribute(‘属性名’);//返回指定元素属性名的属性值。element.attributes[‘属性名’];//返回指定元素的属性名和属性值。通过querySelector获取,获取是拿到的第一个元素。通过querySelectorAll获取,返还的是数组;通过类名获取dom元素 返还的是数组!通过标签名获取dom,返还的是数组!原创 2022-12-16 14:40:17 · 250 阅读 · 2 评论 -
解决使用原生表格table数据进行Vue的循环渲染时,对行或列进行合并的问题。
因为涉及到数据的循环渲染,所以在渲染数据欠,我们首先要设计好数据的。在实际的开发场景下,有时候我们需要对表格的列或者行进行合并,通过对数据的归类处理,这样在循环的时候就可以解决合并的问题。把数据相同的进行归类,类似于以下的方式。原创 2022-12-15 14:58:08 · 1718 阅读 · 0 评论 -
使用Element ui的from表单验证时,绑定的值无法在验证函数中获取值,恒为undefined的问题分析。
在最近使用element ui的form表单功能进行开发时,通过prop绑定时,无法正确的获取value值,一直输出为undefined,通过调查发现,目前el-form的model主要用表单验证的,也就是配合el-form的rules和el-form-item的prop来使用的。上面是个错误的示范,如果把要验证的数据放在了model绑定的对象外,那么就无法获得数据,验证规则内会一直得到undefined。当你已经对该属性进行绑定后,那么接下来,你的表单的prop默认绑定的值就是model绑定的对象的值。原创 2022-12-13 18:29:14 · 2476 阅读 · 3 评论 -
如何实现随机生成坐标点,并且使每个坐标点之间的距离大于某个距离?(用于散点图的绘制,进行数据的处理)
通过循环获取每个坐标点,每获取一个新的坐标点,都要与之前生成的坐标点进行对比,如果大于指定距离,最近需要开发一个新需求,需要绘制一个随机生成数字的散点图,要求点与点的距离要大于某个特定值。则符合条件,退出循环,如果小于或等于该距离,则继续随机生成,进行比对。可直接复制到本地看效果!//点与点之间的计算公式。原创 2022-12-08 18:14:45 · 1355 阅读 · 0 评论 -
解决:v-model cannot be used on v-for or v-slot scope variables because they are not writable.报错问题
在使用vue进行前端开发时,可能会遇到循环渲染input输入框的需求,当使用v-for循环后,对v-model进行值的绑定时,可能会出现以下错误,如图所示:v-model cannot be used on v-for or v-slot scope variables because they are not writable.错误代码:通过查阅文档发现,v-model 不可以直接修改 v-for 循环迭代时别名上的数据解决方法:我们可以使用对象的索引来进行v-model的值的绑定。通过以上的方原创 2022-12-06 17:58:07 · 6500 阅读 · 0 评论 -
Vue开发时,循环生成input,对input框进行位数限制或小数位置限制时,input框的值没有正确双向绑定的问题。
问题开发时,我们发现在通过循环获取input时,input的值并没有进行双向绑定原创 2022-12-02 15:22:46 · 842 阅读 · 0 评论 -
如何对input框的值进行小数位数的保留,保留几位小数的方法。
在最近开发的时候,遇到这样的需求,对input框内的值进行小数位数的保留,最多保留6位小数。我们可以通过对值内的小数点的索引的判断,获取小数的索引,然后进行保留小数位数。通过以上的方法就可以完美的处理input框保留多尾小数的问题了。原创 2022-12-02 13:20:49 · 1021 阅读 · 0 评论 -
css 去除标签中最后一个子元素的margin(3种方式)
最近遇到的在布局的时候,最后一个margin不想要,虽然很简单,但还是想总结一下。先上公用代码:css * { padding: 0px; margin: 0px; box-sizing: border-box; } body { width: 1200px; margin: 0px auto; }原创 2020-06-07 20:07:14 · 5605 阅读 · 0 评论 -
使用flex进行两端布局,并且可以控制相邻元素的间距
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .content {原创 2020-11-02 17:31:39 · 8568 阅读 · 0 评论 -
js中使用Tab键可以进行选中,用enter触发点击事件。
使用tab可以进行选中,用enter触发点击事件。tabindex属性可以添加 Tab键的focus<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<原创 2021-01-05 17:20:40 · 2963 阅读 · 0 评论 -
web前端界面优化之两端对齐
自己比较常用的第一种方法:使用浮动布局,calc进行计算两个标签之间的间距进行排版布局。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g原创 2020-08-11 22:51:35 · 1672 阅读 · 0 评论 -
jquery.reel.js 360°旋转方法使用详解
jquery reel 源码地址: http://code.vostrel.cz/jquery.reel.js主要功能:360°图片旋转,长图片横拉,静态图片做成动态,伪动图效果参考案例:https://github.com/pisi/Reel 直接在github上下载,可以打开example文件内,查找适合自己的例子,进行改造。使用方法:首先要引入css js 文件,因为jquery.reel是基于jquery进行使用的,所以也要先引用jquery文件。触发效果的方式有两种:行内使用或j原创 2020-12-16 17:41:14 · 926 阅读 · 0 评论 -
Swiper使用时pc端有轮播,mobile无轮播,或mobile有轮播,PC无轮播的自适应写法。
背景:在日常双端开发时,有时候会遇到比较特殊的轮播需求,比如标题中所写的那种形式,只适应一个单端的轮播图,另一个端要不破环样式。当我们正常使用swiper轮播的时候,使用浏览器自带的调试工具时,每次来回切换就会破环界面的ui,所以刷新就可以解决,对于我这种强迫症患者来说,不是那么舒适,在网上搜了很多方法,并不能完美的解决。错误写法:本来我的想法是,在pc的时候init,在mobile进行destroy,但是我发现这样进行操作的时候还是会有问题,在来回切换的时候样式去不掉,会错乱。方式1:原创 2020-11-25 13:20:42 · 775 阅读 · 0 评论 -
使用swiper5进行3d轮播图,轮播切换.
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Swiper的3D切换</title> <link rel="stylesheet" href="css/swiper.min.css"> <link rel="stylesheet" href="css/certify.css">原创 2020-09-15 22:18:43 · 2623 阅读 · 0 评论 -
解决使用svg绘制后下载图片以及下载svg内部嵌套image图片失败的问题。
在使用svg进行图形绘制之后,可能需要下载已经绘制的svg图片,我们可能会遇到以下两种情况:情况1:情况2:第一种是svg内部都是使用svg的方法进行绘制的,我们可以直接通过canvas的方法进行绘制下载,方法如下第二种情况是在svg内部嵌套了一个image的图片,此时则无法使用第一种方法直接进行下载,下载的图片无内嵌图片,后来通过调查发下,需要把image引入的图片的路径更改微base64的方法后,再进行下载则可以实现,并解决问题。方法如下。通过此种方法就可以解决svg内部嵌套image图片下载原创 2022-11-18 14:01:26 · 1338 阅读 · 6 评论 -
如何把后端返还的blob格式的文件进行本地下载?
判断文件返还的格式类型,使用前端a链接的方式进行前端单个文件下载功能的实现。qs.stringify 是把一个参数对象格式化为一个字符串。代码的请求思路:请求后端接口,返还blob文件。原创 2022-11-17 09:44:30 · 682 阅读 · 0 评论