![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
功能实现
文章平均质量分 50
接口写好了吗
愿天下没有看不懂的技术贴
展开
-
【国际化I18n使用方法】vue2使用i18简单实现多语种切换,刷新保持,动态数据处理
这句话的意思就是有缓存的话拿缓存的语言类型,没有就默认用中文的,然后你就可以全局都刷新保持语言类型了。总结就是,安装好插件后,配置几个语言的js文件,每个词都要在每个js内写一遍对应的语言,然后通过切换js文件拿到对应的语言,实现翻译的效果。1,在你的语言文件内用花括号然后内部用一个变量接收,在你的也没事,调用$t 的时候,第二个参数传一个对象,里面分别是你对应括号内的名字和值就可以实现动态数据。1,你在某一个设置语言的页面切换语言,然后把切换的比如从zh切换到en。然后把en保存到本地缓存里。原创 2024-06-22 11:03:07 · 1182 阅读 · 0 评论 -
【图片和表格数据导出excel】js把表格导出成excel格式,表格内的图片一起导出
表格样式可以在这里面调整,就是直接加在表格的标签上写样式,tr td 之类的。2,使用方法,组好表头和内容就行,图片会自动识别的。1,js代码,把这个代码复制到一个js文件内。原创 2024-06-12 13:28:59 · 498 阅读 · 1 评论 -
【打印功能】js简单实现表格样式的数据打印,按样式打印出来
1,html部分:写一个表格,然后数据填进去。2,css部分:把表格样式搞一搞。3,js部分:这样复制过去就行了。4,点击打印按钮,搞定。原创 2024-06-06 11:23:53 · 489 阅读 · 0 评论 -
【多个请求按顺序执行】通过async await和promise按顺序执行请求,多种方法情况集合
需要获取数据的时候就promise.all(数组).then()就可以拿到返回值,把请求用promise抱起来,请求成功再返回resolve。这里是通过async await和promise配合完成。实现逻辑:先定义一个空数组,然后循环把请求加到数组内,然后promise.all(数组)就自动按顺序执行了,比如循环三次,顺序应该是 A,B,A,B,A,B。你按什么顺序发送的,就会按什么顺序返回值。返回值是一个数组,是多个请求的返回值,可以通过promise.all来实现。然后用await阻断,按顺序执行。原创 2024-02-23 15:27:04 · 1406 阅读 · 0 评论 -
【nodejs升级版本】win10 nodejs版本低升级版本流程
3,下载各个版本的node网址是这个,下载方式就是进去看那个V开头的版本号,找个你想要的版本,然后点开进去找对应你电脑系统的下载就行了,比如我是win10 我就下了下图红圈标出来的那个。1,找到你node的安装路径,不知道的可以cmd命令行中输入这个命令就可以看到了。4,找到node文件夹路径,去把里面的文件全部替换成新的文件。然后node -v 看一下,版本就更新了。2,查看node版本的命令是这个。原创 2023-12-10 10:46:16 · 3318 阅读 · 0 评论 -
【vue3基础核心语法】简单学习vue3核心语法加elementPlus,vue3和vue2的区别,有vue2基础的看完这篇快速使用。学习笔记持续更新【详细注释】
一直用的vue2写的。一直没有接触过vue3没有机会使用工作中自己又比较懒,一直拖着没学,因为感觉学了不用,过段时间我就忘得差不多了。这次刚好公司有了这个vue3的项目,我就来学习一波,然后实战练练刚好记得牢一点。中途遇到的各种问题和我学习到的一些vue3的语法等。就在这里记录下来学习笔记。方便自己忘了来看看,一直保持更新!!路由配置 element Plus 组件默认英文 全局转中文原创 2023-12-09 15:52:37 · 7075 阅读 · 2 评论 -
【自定义列表头】vue el-table表格自定义列显示隐藏,多级表头自定义列显示隐藏,自由搭配版本和固定列版本【注释详细】
最近遇到一个功能,需要的是把表格的列可以配置,用户可以根据自己想要看的数据来改变表头列显示哪些隐藏哪些。于是我做了两个版本。第一个版本是自由搭配的。就是提前顶号所有的列,然后自己可以拖拽到想要位置顺序。也可以自己新增一个二级表头自定义一个名称把表头都拖进去组成多级表头表格。不过这种的毕竟复杂。第二个版本就简单一些了,是固定的列,比如十列写好了,然后用户只能在这十列里面选择显示或隐藏哪些。位置不能动,文字也不能动。就是单纯的显示隐藏列。原创 2023-11-16 16:06:25 · 6092 阅读 · 3 评论 -
【限制输入框值类型】自定义指令el-input输入类型限制,vue和html两个版本
经常遇到输入框需要限制只能输入数字的,因为用户很离谱,明显输入数字的地方他非要输入英文或者中文但是用到UI框架或者自己写方法验证表单比较麻烦为了一个输入框专门去弄一个验证很麻烦所以这里就整合了两种自定义指令的方式,更加方便使用vue版本和 html版本都有。1,弄一个input.js文件复制下面代码vnode.locking = true//解决中文输入双向绑定失效})vnode.locking = false//解决中文输入双向绑定失效})//输入监听处理return;原创 2023-11-03 11:04:16 · 1395 阅读 · 0 评论 -
【数值计算汇总】js前端数值计算校验转换
这个合集功能主要是为了处理前端计算数据因为我的项目有很多表格公式计算是前端写的所以有一个很麻烦的事情就是加减乘除的时候因为各种情况导致报错最常见的就是后端传的值不规范有时候这个字段没有值的时候给我返回的是数字0,有时候字符串数字0,有时候null,有时候 ’ ’ 等等之类的不确定情况所以我就写了几个方法统一把后端的数据丢里面直接校验转换,凡是没有值的统一都转0这样计算不会报错。原创 2023-10-27 15:53:08 · 393 阅读 · 0 评论 -
【递归汇总】前端各种递归方法记录合集
【代码】【递归汇总】前端各种递归方法记录合集。原创 2023-10-27 15:38:12 · 832 阅读 · 0 评论 -
【排序】js简单实现前端数组排序,多字段数组对象排序,字符串排序,数字排序等
数组对象根据某一个字段排序。原创 2023-10-27 15:34:25 · 1265 阅读 · 0 评论 -
【筛选方法汇总】js简单实现多条件过滤数组对象,返回新的数组,根据一个数组内的元素,过滤另一个数组对象【持续更新】
使用方法:filterConditions 是筛选条件,key要和筛选的数组中的key一致,如果筛选条件没有传或者传的空,会返回原数据不筛选,如果有值了会筛选。主要对比的地方在这里 p[key] == queryObj[key]如果有其他特殊需求的选项或者值需要返回原数组的就自行增删。是因为我下拉框选项中有一个全部的选项,拿到的值是0.我这里是直接对比是否一致的,如果你需要模糊查询,这里注意,返回原数组的判断条件可以自行设定,第二个参数传的是需要过滤的数组对象。需要返回所有数据,所以我加了一条,原创 2023-10-27 15:28:33 · 3984 阅读 · 0 评论 -
【企业微信扫码登录】html网页中如何实现企业微信扫码登录功能,图文描述简单三步实现
今天做到了企业微信在网页上扫码登录的功能要求就是登录的时候可以点击企业微信的图标,然后弹出扫码登录的二维码扫描二维码登录,跳转拿到code然后把code发给后端后端根据code获取对应用户信息,然后返回给我,我登录到系统首页。原创 2023-10-10 14:24:28 · 1942 阅读 · 1 评论 -
【表格插入小计行】el-table表格,数组对象中根据某字段插入小计行计算数据
功能解释:遇到的一个需求,是表格的tabledata数组。里面有科室医生还有很多消费指标等数据。然后需要我排序后把科室放在一起。然后在每个科室下面添加一行数据,是小计行。用于计算上面相同科室的所有数据汇总。然后最下面再来个合计行,加上所有的小计。原创 2023-09-21 09:19:53 · 959 阅读 · 1 评论 -
【el-tree查询并高亮】vue使用el-tree组件,搜索展开并选中对应节点,高亮搜索的关键字,过滤后高亮关键字,两种方法
2,差的时候调用这个this.$refs.tree2.filter(this.title);里面的title就是你搜索的值。1,在tree标签上加上这句话:filter-node-method="filterNode"这个方法复制下面的,只需要把data.title修改成你字段的名字就行,比如你的字段叫name就是data.name。这里的逻辑就是通过递归循环把所有和关键字匹配的节点筛选出来。这个是用的官方文档的那个过滤方式,可以参考官方文档看一下。效果图这样的,会把所有的有这些关键字的节点都展开。原创 2023-07-22 10:20:03 · 3736 阅读 · 1 评论 -
【html页面引入vue3语法模板】在html页面中使用vue3语法和elementul-plus组件库的简单模板
这是最近在看这些东西,因为看别的地方是用脚手架直接用的。我这个项目想要在html上直接使用。所以我就试了下如何在html上使用vue3语法目前摸索出来的是这样可以使用。记录下来供参考,如果有不好的地方后续改进。原创 2023-07-12 09:01:23 · 3053 阅读 · 0 评论 -
【vant移动端表格数据排版】用vant2简单实现一个把PC端表格数据展示在移动端的排版。上拉加载更多,下拉刷新页面,新增,编辑,删除功能
上次做了一个移动端的表格功能,纯表格的那种。跟PC一样,但是我一直觉得在移动端上写表格很糟糕的体验,毕竟手机就那么大。这不合理。但是我这公司又需要把PC端的表格的数据展示在移动端。导致我只能去试试看怎么排版比较好。由于网上也是一直找不到什么案例参考,所以就自己想了一个排版供大家参考。如果各位有更好的排版方式请发我一个图学习一下。原创 2023-07-05 14:52:27 · 7449 阅读 · 0 评论 -
【el-tree大量数据卡顿解决】el-tree利用懒加载解决大数据量卡顿问题,el-tree懒加载回显方法
问题是这样:我的项目中,有一个角色管理的页面。以前的老代码,直接用el-tree渲染的树形结构,勾选设置对应的权限。其他的部门倒是还好,但是涉及到老板的部门设置的时候,由于我们这边的权限太多,部门也特别多,而老板又是有很多的权限,导致我们一次需要渲染出一大堆的tree结构之外,还需要回显一大堆的勾选。这就导致别的人设置可以,但是老板设置权限的时候就会卡住几十秒,甚至卡死浏览器。所以没办法,只能动手优化一下老代码,让他快一点。这样的属性结构,有很多的层级el-tree懒加载的功能,一层一层的加载,让页面不会原创 2023-07-04 10:18:36 · 10278 阅读 · 15 评论 -
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】
最近刚好遇到了这么个任务需要我在企业微信中内嵌一个自建应用,用于打通跟我们医院后台系统的数据对接。这样就可以直接让客服们在企业微信上点击右边页面操作后台的数据了。这可是给我踩了好多坑。毕竟从来没有做过企业微信的开发,有点懵。也是踩了好多坑后,这里写一个帖子汇总一下我经历的全流程开发当然这是基础的流程啊。因为我的功能要求也不是很高。后面如果开发更多的东西再补充。原创 2023-04-13 16:08:42 · 9728 阅读 · 6 评论 -
【uniapp索引列表】移动端uniapp使用uni-indexed-list索引列表方法,增加图片头像方法,覆盖全屏解决办法
最近做到了一个移动端联系人列表功能但是不让使用移动端的ui库,只能使用uniapp的组件所以就发现了这个索引列表组件但是使用过后发现有一点问题,比如我需要头像,但是他没有自带图片功能。比如我使用过后,我自定义了导航栏但是被覆盖住了,把导航栏顶没了。这里我都一一的解决了,所以这里记录一下。完整代码直接发出来看吧问题点是:这个组件给自己的最外层盒子加了个定位,在这里所以就造成了他是脱离文档流的,然后会导致比如你再上写了其他的组件比如搜索栏,原创 2023-04-06 14:06:36 · 5576 阅读 · 0 评论 -
【uniapp tabs标签组件】移动端tabs标签组件,点击标签滚动到中间位置,点击标签横向滚动显示完全【复制即用】
这个tabs功能是很多移动端项目都要用的最近我刚好遇到了这个功能因为我们项目不让用uview等组件。所以只能用uniapp自带的组件uni-ui但是问题就是这里没有这种滚动的tabs标签组件用啊。所以万不得已之下,我cv工程师只好动动小手写一个组件了。刚好这里也发出来保存一下,以后在用到可以直接复制了。原创 2023-03-20 10:29:55 · 3281 阅读 · 1 评论 -
【移动端表格组件】uniapp简单实现H5,小程序,APP多端兼容表格功能,复制即用,简单易懂【详细注释版本】
由于最近需要做移动端的项目有个pc端的后台系统里面需要移一部分页面过来而里面就有很多的表格,我就开始惯例网上先找前人栽的树,我好乘凉然后找了一圈发现,不管是主流的移动端ui库或者网上自己写的帖子,或者uniapp的插件网站都没有看到符合我要求的表格,然后如果要改别人的源码那我看代码都要看很久,好切有些还奇奇怪怪的bug不兼容可能是别人使用了某些组件和插件之类的。导致我很多设置不生效。没错,我也改过别人的源码了,后来放弃了。H5,小程序兼容表格。移动端表格功能。多端兼容表格功能原创 2023-03-02 10:55:45 · 13994 阅读 · 11 评论 -
【原生html使用vue混入功能】html文件引入vue语法,在html中使用vue混入功能
最近遇到的需求,需要在html页面上用vue的混入功能然后我网上找了很久没有试出来然后就自己琢磨怎么弄,没想到还真试出来了。这里就来记录一下,万一以后又遇到这情况,知道如何混入了- -!原创 2023-02-23 11:18:40 · 1761 阅读 · 0 评论 -
【html弹框拖拽和div拖拽功能】原生html页面引入vue语法后通过自定义指令简单实现div和弹框拖拽功能
这是html版本的。只是引用了vue的语法。这是很多公司会出现的一种情况,就是原生的页面,引入vue的语法开发这就导致有些vue上很简单的功能。放到这里需要转换一下以前写过一个vue版本的帖子,现在再加一个html版本的。原创 2023-02-13 14:17:13 · 1964 阅读 · 0 评论 -
【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑,点击单元格变成弹框修改数据
这是继我另一个帖子就是单元格点击变成输入框后添加的功能因为考虑到有些时候修改单元格的信息可能点击后要修改很多,那一个输入框不好用所以这时候就需要一个弹框可以把所有表单都显示出来修改所以这里就专门又写了一个demo,用于处理这种情况如果需要看表格单元格点击后变成输入框,然后焦点消失后直接更改的模板,可以点击这个帖子点击单元格变输入框。原创 2023-02-13 14:05:11 · 8575 阅读 · 1 评论 -
【表格排序】vue-elementul表格简单实现排序,数组对象排序方法
像这样的,我是用的第一列ks(科室)来排列的。a b代表每一行的数据。这里是每一行是数字的话就用减号排序,ab两个变量调换一下位置就是反过来的。替换成你们自己需要的字段名就可以了。tableData代表表格数据。比如你表格想要第一列按名字排序。那么就这样,用大于小于号来排列。我这里ks就是表格中的字段名。原创 2023-02-07 14:01:07 · 685 阅读 · 0 评论 -
【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑,点击单元格变成输入框修改数据
这是最近遇到的功能,经常会需要一个表格可以编辑数据类似于excel那种点击一下单元格就可以编辑数据,修改后鼠标移动出去光标消失就会保存数据给后台这里记录一下实现方法,其实也比较简单就是通过角标来判断显示隐藏的。原创 2023-02-02 10:18:42 · 8295 阅读 · 2 评论 -
【html页面引入vue页面】使用httpVueLoader.js让html页面引入vue文件当组件使用,html组件化开发
最近遇到的一个需求,就是html页面需要组件化开发,然后找了一圈,发现很多组件化开发不好用一般就是几种,比较用的多的一个是iframe嵌套页面,一个就是通过js生成页面写组件。感觉都挺麻烦的。就想着有没有能像vue哪样简单的组件引入方式。而且iframe加载也慢。没有组件快。后来发现了这个httpVueLoader.js非常好用。只需要引入这个文件,然后其他使用方法和vue差不多了。稍微有点变动可能就是传值方面。传值下面也给出了方案。集中传值的方法应该大体是够用了的。原创 2023-01-16 09:18:48 · 6554 阅读 · 2 评论 -
【多个IP地址用逗号分割开】vue简单实现,textarea文本域输入多个ip地址用逗号分隔开,根据空格分割
这个功能也是很多地方会用到的。一般使用的地方是比如需要设置白名单或者黑名单然后页面上会有一个textarea文本域。在文本域中输入多个ip地址,输入一个回车换一行。然后点击保存后,把数据通过逗号隔开的格式传给后端后端再去拿到每一个ip地址做一定的操作所以这里记录一下逗号分割的方法因为我在网上找了很久,看到基本写的都不是我要的。原创 2022-12-23 10:59:42 · 1486 阅读 · 0 评论 -
【表格合并与底纹】vue-elementul表格简单实现合并单元格,与列和行给底纹颜色
这是一个很常见的需求啊,因为很多公司都会涉及到写表格展示数据那么在某些公司内就会出现为了让数据更直观的感受到而让你给某些行和列用颜色标出来。使得看起来更方便那么这里就汇总一下常用的横竖合并以及横竖颜色底纹如何实现。原创 2022-12-23 09:49:49 · 1197 阅读 · 0 评论 -
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决,移动端引入报错解决】
为什么要使用阿里图标库:图标现在是很多地方都会用到的一般我使用的时候都是直接在ui库中比如elementul自带的一些有时候哪怕是感觉图标不是非常适合也是用的elementul图标,主要原因是懒因为能直接复制的,就懒得再去阿里图标库下载遍,差不多就行了。但是总有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。这时候我们需要去到阿里的图标库里找找,这里的图标非常多,完全可以满足一切需求了。1,Unicode:兼容性好,ie低版本也好用,可以和文字一样调整颜色和大小。缺点是不显原创 2022-11-28 10:06:45 · 5039 阅读 · 1 评论 -
【微信小程序支付功能】uniapp实现微信小程序支付功能
如果出现了调用不起来的,没反应的,看一下uni.requestPayment内的参数是否错误。前端在这个请求的成功内继续调用微信的方法uni.requestPayment。然后就是正常的支付了。把后端传给你的6个参数按我这样写上去,就可以调用起微信的支付功能了。然后先请求后端的一个方法,把你的价格还有openid之类的传给后端。点击按钮后触发支付方法,就是我下面写的这些代码,复制就可以了。如果你是手机上测试,就是直接掉起支付,跟上面的图一样。首先前端写一个页面,简单说就是有一个输入支付金额的。原创 2022-11-01 10:10:46 · 2841 阅读 · 2 评论 -
【H5微信授权】简单实现H5页面微信授权功能,微信开发者工具报错 系统错误,错误码-1,undefined解决办法【详细】
微信开发者工具报错 系统错误,错误码-1,undefined最近写到了H5公众号,需要微信授权的功能。这里记录一下授权的流程和踩了个坑。原创 2022-10-27 14:13:37 · 8261 阅读 · 0 评论 -
【小程序websocket前后端交互】uniapp写微信小程序聊天功能功能,websocket交互功能,心跳重连【详细注释,复制即用】
这几天在做的一个需求,就是要写一个小程序端的页面,用于跟客服聊天。然后就用到了websocket技术,以前我做过网页版的,但是做小程序后发现网页版的逻辑放过来没问题,但是很多的方法和api是不生效的,所以又查文档专门看了一下对于的api,踩了一些坑后来记录一下,方便下次复制!1,页面信息展示,根据后台返回字段,分左边和右边展示2,输入后点击发送按钮,可以发送消息,通过websocket传给后台3,进入页面后链接websocket。原创 2022-10-25 15:25:14 · 7815 阅读 · 4 评论 -
【上传图片,文件,视频功能合集】vue-elementul简单实现上传文件,上传图片,上传视频功能【详细注释,简单易用】
这三个功能是所有项目基本都是常用的功能上传图片,上传文件,上传视频功能我最近也是又在做上传文件的功能然后发现以前写了但是没有记录,导致又要从新弄很麻烦所以这一次直接一次把三个常用的功能代码都开个帖子记录下来,方便以后复制。这里采用了vue-elementul来实现。主要使用了elementul内的el-upload组件完成原创 2022-10-19 14:42:52 · 4482 阅读 · 3 评论 -
【html转pdf】html页面导出为pdf文件,纯html版本,简单实现pdf转换【html2canvas+jspdf】
最近遇到的需求,把html转成pdf文件下载导出。目前网上看了下,有三种方法,但是其中两种需要后端配合一种是纯前端实现的,比较简单。所以就使用了这种。也就是html2canvas + jspdf 的这种方法这种方法实现的思路就是,通过html2canvas 把元素内的数据截图出来成一个图片然后把这个图片通过jspdf 方法转成pdf格式输出出来但是也有缺点,就是只是一个图片,而且清晰度也没有那么高。只能说勉强实现一个需求,先应付一下,后续会继续看其他的写法,然后更新。原创 2022-10-18 10:21:48 · 8342 阅读 · 0 评论 -
【websocket功能】vue简单实现websocket链接模板,建立websocket心跳重连机制【包含node.js后台代码,可以自己测试websocket】
目前很多项目需要用到websocket功能简单的讲解一下这个功能。简单来说就是,以往我们发请求只能前台给后台发但是如果我们遇到比如类似聊天一样的功能,别人发信息给我。我们就处理起来很麻烦,当然也有办法,就是我们前端设置定时器定时请求后台拿到别人发给我的信息。但是很明显,这不是一个好办法,如果一秒一请求,那服务器顶不住,毕竟用户不是你一个。如果间隔时间久了,那别人发个信息给你,你都半天看不到,那还有人用你的软件吗。所以这时候就出现了websocket。原创 2022-10-15 09:05:57 · 1804 阅读 · 2 评论 -
【多个图片合成一张图片】vue简单实现多张图片合并成一张图并下载图片功能,html2canvas下载图片跨域问题解决【详细注释,复制即用】
最近接到的一个小需求,是需要两个图片合成一张图片然后可以下载下来变成一张完整的图的我就在网上看了下,发现html2canvas可以完成这个功能那就做一个小案例记录一下这个功能,以前还没做过呢。以后再用到可以直接复制了。原创 2022-10-10 11:05:38 · 6533 阅读 · 0 评论 -
【wangEditor富文本编辑器】富文本三种使用方法,html使用富文本,html套vue脚手架使用富文本,vue使用富文本【简单易用,复制即用】
富文本编辑器功能是很多人都要使用的市面上有很多的编辑器可以供选择,但是很多编辑器会有点复杂,或者文档看起来难受。我最近做了一个需求,是需要在html文件上写富文本编辑器。但是我看了以前用的富文本,没找到如何在html上引入使用。就感觉不是很方便,所以后面找到了这个wangEditor富文本编辑器发现这个非常的简单,而且有html的版本文档介绍,对新手比较友好所以今天就专门写一个帖子记录一下三种使用方法。原创 2022-10-07 16:37:33 · 3584 阅读 · 0 评论 -
【vue导入导出Excel】vue简单实现导出和导入复杂表头excel表格功能【纯前端版本和配合后端版本】
这是一个常用的功能,就是导入和导出excel表格但是时常会遇到一些复杂表头的表格导出和导入比如我这个案例里面的三层表头的表格。网上看了下发现了一个非常简单导出和导入方法当然这个是纯前端的版本,会出现分页不好下载的情况。所以实际工作中,导出还是后端负责的。1,要下载一个插件,输入这个指令:npm install -S file-saver xlsx2,在页面中引入这个,直接在你需要写导入导出的表格页面写就行。3,给你的表格绑上这个id。用来导出的时候拿数据的。原创 2022-09-14 13:35:39 · 4489 阅读 · 1 评论