- 博客(31)
- 收藏
- 关注
RSS订阅原创 前端提高性能——使用Intersection Observer API对图片视频进行懒加载
在用户选择一页五十条时，页面加载速度会比较慢。为了提高性能，选择用Intersection Observer API实现图片懒加载。调整webpak配置，在chainWebpack方法中查找到处理 SVG 文件的规则，类似地，可以添加相应的规则来处理其他类型的图片文件
2024-03-15 17:38:23
371
原创 使用css的transition属性实现抽屉功能
使用css手写一个抽屉，并且不能遮挡住原来的页面1、这里主要使用了transition属性，transition属性是css3中的一个重要属性，可以为一个元素在不同样式之间变化添加补间动画。相较于传统的js实现的动画，transition属性实现的动画效果更细腻而且内存开销小。（1）所有数值属性都可以参与过度，比如width,height,left,top,border-radius。2、transition属性有4个基本要素，分别是要过度的属性，动画时长，动画演变速度，延迟时间。
2024-03-01 17:19:57
808
原创 介绍几种antvX6常用的方法或配置（使用数据渲染节点和连线、图像居中完整展示、节点不可移出画布、节点图片和标签变化）
接本专栏的上一篇antv X6新手教程，补充一些新的需求实现，丰富巩固antv X6的使用。此篇是以上一篇为基础的，如有初学者可以看本专栏的上一篇。将编辑好的拓扑图展示在其他页面、根据节点数据来改变节点的图片和标签等
2024-03-01 16:22:59
1792
原创 vue项目中使用antvX6新手教程，附demo案例讲解（可拖拽流程图、网络拓扑图）
用户可以自己拖拽节点，节点之间可以随意连线，保存拓扑图数据后传给后端，然后在另一个页面拿到之前的数据进行渲染展示。
2024-02-28 14:32:14
4003
原创 js如何将对象转为数组（Object.values、Object.entries、Object.fromEntries区别举例）
有时候后端传给前端的数据格式不是我们想要的，需要自己处理一下数据。后端传的{aaa: "one" ,bbb: "two" ,ccc: "three" },需要将这个对象改成一组键和值成为一个数组，这个时候就可以用Object.entries()，例如：let obj1={aaa: "one" ,bbb: "two" ,ccc: "three" }let obj2=Object.entries(obj1);//obj2:[["aaa", "one"],["bbb", "two"],["ccc"
2024-01-29 17:02:30
366
1
原创 vue3用reactive定义的对象直接赋值{}没用的解决办法
前言：在项目开发时，有很多弹窗里面放的表单，如下图这个新增数据的弹窗，在每次打开弹窗时需要给表单定义的数据置空，否则你第二次打开弹窗的时候，表单还显示着上一个新增的数据。需要在打开弹窗是将上面那个对象置空，但是vue2一般直接={}就可以，vue3的话这样不行，所以需要用到object.assign
2024-01-26 16:14:04
936
原创 vue3项目用vite打包时，如何将部分特定的js文件不要进行合并打包
最近拿到一个需求是用户有可能想自己修改前端项目的公司名称和系统名称等，这个时候就需要做一个配置文件来存放这些配置：功能不难，其实就是一个js文件而已，所有页面上都直接用这里定义的变量即可。用户只需要在部署前把相应的变量修改成自己想要的。但是在我打包之后发现，我的这个js文件被整合在了一个js文件里。这就导致修改titleConfig内的参数根本没有用，浏览器都没有去加载titleConfig.js
2024-01-17 16:33:38
1110
原创 超好用的element的el-table表格组件二次封装-附源码及讲解
前言：在很多后台管理系统开发时总会有很多表格的使用，如果我们每次都用elementui官网的el-table去写的话，调整所有表格的样式就会很麻烦，而且页面内容也会很累赘繁琐。讲解一个我经常使用的二次封装el-table组件，该组件可以容纳很多种特定的需求并且非常简便。所有例子都是使用vue2+elementUI，如要使用vue3稍作修改即可，也可评论问我
2023-10-26 17:17:23
2322
14
原创 如何将elementui的el-table的展开行事件用自定义的按钮控制，并且可以实现“展开”“收起”的切换
需求是表格内每行点击展开按钮要展开内容，查看elementUI的官网有展开例子，但是官网的例子是点击表格前的箭头来控制展开收起的。
2023-09-26 15:49:43
3777
原创 Vue3+elementPlus实现时间选择器控制可选时间的范围（大于今天之后的时间不可选择）
最近遇到一个优化bug，时间选择器选择今天之后的时间没有必要，想要前端在选择时间的时候去限制用户。大于今天的都不可选择
2023-08-25 11:37:21
3440
原创 vue3+elementPlus-浏览器告警解决error.ts:14 ElementPlusError: [ElPagination] 你使用了一些已被废弃的用法，请参考 el-pagination
在使用elementuiPlus的分页器组件的时候，发现会有如下图警告。对照官方文档也没什么问题，然后把total删了就发现不报错了。解决办法：给total一个初始值，我是给了0。原因是：在定义total的时候没有初始值。
2023-06-28 17:47:13
1911
原创 vue3引入图片等无法使用require，需要用newURL来动态引入图片等静态资源
Uncaught (in promise) ReferenceError: require is not defined1、因为require是webpack提供的一种加载能力，但是vue3项目时搭配vite的，所以这里应该用vite提供的静态资源载入方法，将上面的require改为new URL这种格式，页面就可以正常加载静态资源了。new URL（‘路径’，import.meta.url）.href。
2023-06-13 21:05:03
6895
3
原创 vue3-浏览器告警解决: Extraneous non-emits event listeners (queryList, closeDialog) were passed to
[Vue warn]: Extraneous non-emits event listeners (queryList, closeDialog) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event li
2023-06-09 11:42:36
3473
2
原创 vue3获取对象的值的时候，是一个proxy，如何获得我们需要的真实值
因为vue3底层使用的是proxy进行代理的，所以我们在打印出来的是proxy代理之后的proxy对象，proxy对象里面的【【target】】才是真实的对象。使用toRaw（）方法来获取原始对象，这里的‘xxx’就是你需要转换的数据。这里的‘xxx’就是你需要转换的数据。1、使用toRaw（）2、使用json序列化。
2023-06-08 21:49:43
9658
4
原创 vue3-实现父子组件之间的通信（详解+源码）
vue3相对于vue2的父子传参方式有所改变，本文介绍三种：父组件给子组件传参、父组件调用子组件内的方法、子组件调用父组件的方法，如果不需要一种一种看可以直接下滑看全部代码，有注释也蛮好理解。
2023-06-07 11:40:11
5852
原创 vue2父子组件传参方式汇总
父子通信：父传子：通过props的方式来传递数据子传父：通过自定义的事件来进行触发传递将这种参数传递的方式称为 自定义事件的方式通信。而且也是目前工作中用的最多的。mychange就是你们自己定义的事件名字。这个事件名字不要跟系统名字一样，比如：click、change、focus等等子组件代码eg：（子组件触发自定义事件，触发自定义对应事件函数就会立即执行）$emit是vue提供给我们的一个api，可以触发自定义事件优点：子组件通过api触发事件就可以传递参数，无需自己调用函数。
2023-05-31 17:25:34
1649
原创 前端实现websocket通信讲解（vue2框架）
最近接到的需求是前端需要实现一个全局告警弹窗，如果使用ajax请求http接口只能用定时器定时去请求是否有告警，这样既消耗资源，又不能实时监测到告警信息。所以这个时候就可以采用websocket来实现通信，因为websocket不用请求一次才响应一次，它可以实现服务器主动发送。
2023-05-30 16:18:48
5041
原创 vue3学习笔记-根据vue2与vue3的区别（持续补充）
Vue3和Vue2对比：性能提升：Vue3这个框架将Vue全部重构了。新的框架。底层采用TS来进行重构，性能提升能达到100%对TS的支持，Vue3底层默认采用TS进行开发。我们Vue开发过程中，一般也会默认结合TS来使用Vue3目前创建项目采用了新的打包工具，vite工具（xxx）团队他们自己发布的一个打包。目标干掉webpack新增了组合式api和响应式api进行开发（hook编程）vue3优势：更快：vue3重写了虚拟dom。提升提升很多更小：新增了tree shaking技术，你
2023-05-06 10:43:49
254
原创 vue+elementUI：如何封装dialog来适应不同展示内容
前言：在日常开发时有时一个页面需要弹出很多个不同的弹出框，如果全都堆在一个页面里会非常累赘且不可复用。需要写一个可以适应不同展示内容的dialog组件。
2023-04-07 11:49:01
1970
原创 前端AES加密详解与源码
前言：前端在一些数据获取或提交时有些敏感信息需要加密处理，比如最近遇到一个bug，是测试在登录时修改了用户的等级字段，从而就看到了其他用户权限下的页面。AES加密有两种模式：ECB模式和CBC模式，需要与后端约定好使用相同的模式。key为密钥，需要与后端约定一致，iv为密钥偏移量。key为密钥，需要与后端约定一致。首先，先引入js加密算法类库。
2023-03-20 11:27:53
1003
原创 【浏览器报错解决记录】SyntaxError: Unexpected non-whitespace character after JSON at position 7
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "SyntaxError: Unexpected non-whitespace character after JSON at position 7"vue.runtime.esm.js?2b0e:1888 SyntaxError: Unexpected non-whitespace character after JSON at position 7
2023-03-20 10:57:14
6710
原创 echarts柱状图坐标轴的内容太长导致显示不全的两种解决办法
因为数据是由后端传过来的，有些会很长有些会比较短，如果只是一味的调整grid会导致短数据前的留白过于多，布局不合理。这个时候就需要用一些别的属性。如上图这样一个横向的柱状图，y坐标轴的内容太长后会导致显示不全。
2023-03-15 21:20:29
8038
原创 使用vue-seamless-scroll实现自动轮播功能-附详解、源码
在日常开发中，很多数据是用表格的形式展现的，但是在一些可视化大屏需要将表格自动轮播，这个时候可以用表格的自动轮播，也可以用栅格布局配合vue-seamless-scroll来实现更完美的自动轮播
2023-02-21 13:58:19
1070
原创 vue的计算属性computed应用--图标弧线排列
一、在日常开发拓扑图中需要展示图例，但是正常的图例都是如下图一样是一横排列的，但是需求总是百变的，如果想要图例呈半圆或者曲线排列，我们就可以用计算属性去设计。ps：呈现效果略丑，主要为了应用computed，该例子在实际开发过程中可以应用于很多弧线排列的样式中。
2023-02-20 17:42:17
166
原创 前端基础-JavaScript的正则表达式详解
判断指定字符串是否满足当前正则表达式规则，如果满足则返回true，否则返回false。将当前字符串中与指定正则表达式匹配的值作为分割符进行分割，形成子串数组。将当前字符串中与指定正则表达式匹配的值替换为指定值。用于检索当前字符串中与指定正则表达式匹配的值。
2023-02-06 15:25:02
184
原创 如何用express快速搭建一个web项目的nodejs框架，express内项目文件的作用
1、先右键你要搭建的文件夹，选择在集成终端中打开2、下载安装express：出现express版本后表示安装成功2、创建express项目：命令行语句：express 项目名称注：如果创建项目失败，找到系统的，用管理员身份运行，再打开脚本命令行窗口，输入回车，如果选项中有则输入,没有选项，则输入，回车后，关闭窗口，重启VSCode。创建目标项目下载express项目依赖的第三方包(保证在目标文件所属的上层文件夹中执行以下命令)cd 创建项目首页配置启动信息启动服务器 关闭服务器可
2022-06-23 16:07:54
289
原创 如何用ajax从前端传一个数组到后端处理，前端使用js，后端为nodejs（源码）
1、想传一个数组到后端时，无法使用URL路径传参，所以本方法采取正文传参：结果传到后端的参数打印出来undefined： 2、这样才知道数组不可以直接传，需要转为JSON格式传参后端终端输出结果：3、此时后端终端有返回的数据了，但是我们还需要把数据转化成我们可以用的数据，所以要再把传过来的JSON数据转成js数据两者输出结果比较：这样就可以了......
2022-06-22 18:01:03
3050
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人