- 博客(1427)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 form 表单的增加add、修改update 常见校验（待补充、待完善）
工作中，会存在表单的增加、修改，因此想 做一个记录，把常见的校验作为记录，方便以后查阅，以及作为一个标准，防止遗漏校验。
2024-07-19 18:16:06
169
原创 Promise.prototype.then().then()学习
文章目录一、问题描述二、介绍 Promise.prototype.then方法介绍then 中的回调函数 返回值三、解析代码一、问题描述最近审核一个同事的代码如下，感觉Promise.all()用法使用有点新奇，与我平时使用不一致，效果应该是没有问题的，不然测试就会测试出来// 防控圈切换场景，支持按防控圈，资源类型过滤统计queryResource (bClear) { const params = { } let _resCamera = [] let _resPolice =
2021-06-11 18:01:06
394
原创 14.webpack4.x eslint配置
文章目录文章参考安装在vue项目中，.vue文件中的 script标签内的代码，eslint 是无法识别的，这时就需要使用插件： eslint-plugin-html规定报错时输入的信息格式Javascript Standard Style (https://standardjs.com) 此处是js一些书写规范的标准集合，根据该集合我们可以配置eslint帮助我们检查代码规范eslint-plu...
2020-01-22 15:10:12
839
原创 Mock.mock( rurl, rtype, template )拦截ajax请求——帮助前端离线开发
文章目录问题描述文章参考快速开始安装Mockjs使用案例Mock.mock( rurl, rtype, template ) 函数介绍根据配置文件，异步加载mockjs 配置文件问题描述在工作中，想自己根据后台模拟的数据，保存到本地，在网络不通的情况下，同样的写ajax请求逻辑代码，不需要模拟ajax请求，获取本地的模拟的数据，能够正常测试和开发，如果有开发环境，可以一键切换到开发环境中，而不...
2020-01-17 17:02:15
1686
1
原创 wx微信调试打开vConsole的办法
小程序在实体手机中调试的时候，没有打印日志很难定位问题，因此，就需要一个 类似vConsole的工具，恰好小程序已经自带了这个功能，做个笔记，方便以后学习。用微信扫描二维码，打开小程序，点击顶部的三个点，打开。
2024-07-22 09:44:17
103
原创 input file只选择图片类型的文件
工作中，测试提了一个bug，就是在上传文件的时候，尽量限制文件类型，比如只允许上传图片，由于以前使用的是 element-ui 组件库，根据配置就可以实现，但是，底层具体是怎么实现的，自己不清楚，因此写个博客，作为自己知识点的补充。
2024-07-19 18:08:01
175
原创 element-plus 自定义dialog的高度
工作中使用 element-plus 的dialog弹窗，由于内容过多，出现了如下效果，操作界面的按钮 需要滚动条滑动到底部，才能看到查看elment-plus 相关的API 文档，没有找到可以设置高度的
2024-07-18 17:17:54
306
原创 Threejs 贴图TextureLoader（根据平面图画一个地球）（七）
加载texture的一个类。内部使用ImageLoader来加载文件。// 立即使用纹理进行材质创建。
2024-07-10 15:33:08
626
原创 Threejs 中使用HTML融合、交互CSS2DObject对象（六）
文章目录一、参考二、学习遇到的问题OrbitControls api 介绍三、案例说明四、官方案例 （月亮围绕地球转）一、参考threejs 基础教程， 郭隆邦threejs API 文档和案例CSS2DRenderer(HTML标签)二、学习遇到的问题在学习官方案例 css2d — label 发现直接给 div dom添加事件一直不生效，经过努力排查，有两个阶段：分析到的原因是受到了 OrbitControls 控件的影响，删掉了就可以正常使用了 （错误结论）OrbitContro
2024-07-10 15:05:16
694
原创 URLSearchParams解析url地址栏参数
在过去，处理URL查询参数是一项相对繁琐的任务。开发人员需要手动解析URL，提取查询字符串部分，并对其进行分割和解码。这个过程涉及到很多繁琐的字符串操作和编码解码步骤，容易出错且代码冗长。为了简化这一过程，ECMAScript 2015（ES6）引入了URLSearchParams API。
2024-07-10 10:51:41
806
原创 svg 引入样式的三种办法（dom转svg，再转图片）
在工作中遇到一个可以将页面的截图作为页面的“封面”，因此就想到了可以将DOM保存为图片，于是就想搞明白其中的原理是怎么样的。问题： 定义的class 样式没有起到作用。// canvas-image元素。// canvas-image元素。// 创建一个image元素。// 创建一个image元素。// 需要获取截图的内容。// 需要获取截图的内容。// 创建svg文件。// 创建svg文件。
2024-07-09 16:50:21
339
原创 失效的 position:fixed
在will-change中指定了任意 CSS 属性。transform属性值不为 none 的元素。perspective值不为 none 的元素。
2024-07-09 16:19:47
475
原创 vue-seamless-scroll 自动滚动插件
工作中做可视化看板，经常会遇到告警信息滚动、图片自动滚动的问题，以前经常是用CSS3的动画效果来实现，缺点是，用户鼠标滚动之后，会导致界面逻辑不准确，优点是效率会比较高，无意中发现了。'无缝滚动第一行无缝滚动第一行''无缝滚动第二行无缝滚动第二行''无缝滚动第三行无缝滚动第三行''无缝滚动第五行无缝滚动第五行''无缝滚动第六行无缝滚动第六行''无缝滚动第七行无缝滚动第七行''无缝滚动第八行无缝滚动第八行''无缝滚动第九行无缝滚动第九行''无缝滚动第一行无缝滚动第一行''无缝滚动第二行无缝滚动第二行'
2024-07-09 10:14:58
303
原创 VueCLI打包错误Syntax Error: Thread Loader (Worker 4) The “from“ argument must be of type string. Receive
vue.config.js 配置 parallel: false。构建正式环境关闭thread-loader。vue-cli 使用 thread-loader 与worker-loader有冲突。
2024-07-08 09:45:17
224
原创 使用高德查询天气
在工作中，后端由于工作量的原因，抽不出空来提供天气接口，因此要求前端在不依赖后端开发的情况下提供天气接口，下面代码是自己测试的效果。'申请高德的KEY-00b51fd3392f8bb48'
2024-07-08 09:28:50
440
原创 Threejs click事件(五)
标准设备坐标系的坐标值不是绝对值，是相对值，范围是[-1,1]区间，也是说canvas画布上任何一个位置的坐标，如果用标准设备坐标系去衡量，那么坐标的所有值都在-1到1之间。Three.js Canvas画布具有一个标准设备坐标系，该坐标系的坐标原点在canvas画布的中间位置，x轴水平向右，y轴竖直向上。* 参考 https://blog.csdn.net/c_wengy/article/details/137956652。// 如果没有新的物体被选中，恢复上一个选中物体的颜色（如果存在的话）
2024-06-20 09:09:33
619
原创 threejs 点、线材质、描边模型介绍（四）
接下来的两个参数是近截面（near）和远截面（far）。当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。或许现在你不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。//3个为一组，表示一个顶点的xyz坐标。
2024-06-20 08:49:41
1028
原创 element-plus的el-image预览图片无法全屏
在开发中，使用 el-image 控件 查看图片详情，即放大图片，按照官方文档使用，结果发现图片详情无法全屏展示，如图。原因：el-carousel 滑动的效果就是利用了 CSS3 的。结论：查看图片详情是因为 CSS居中用的。备注： 代码和上面一样，只是将。图片无法在浏览器居中展示。
2024-06-18 20:31:38
892
原创 threejs gui控制库(三)
/创建一个GUI对象，你可以看到浏览器右上角多了一个交互界面，GUI本质上就是一个前端js库。// 当obj的x属性变化的时候，就把此时obj.x的值value赋值给mesh的x坐标。//创建一个对象，对象属性的值可以被GUI库创建的交互界面改变。// .addColor()生成颜色值改变的交互界面。// gui界面上增加交互界面，改变obj对应属性。// 3. 参数3数据类型：对象(下拉菜单)// 左: -100,//可以用中文。//改变交互界面style属性。// 材质颜色color。
2024-06-15 10:07:13
242
原创 threejs 基本（圆、矩形、立方体）图形(平面、立方)介绍（二）
three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。//球体网格模型沿Y轴正方向平移120。// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景。//设置mesh3模型对象的xyz坐标为120,0,0。//三维场景显示范围控制系数，系数越大，显示的范围越大。//球体网格模型沿Y轴正方向平移120。//设置相机方向(指向的场景对象)//材质对象Material。// 透明度的值是 0.5。// 透明度的值是 0.5。
2024-06-15 10:00:37
573
原创 threejs 入门介绍（一）
最近工作中因为要画地块（不规则的图形），必须了解svg的相关知识，又因为svg与canvas有一些相关性，因此又学习了canvas相关的知识点，由于工作需要，需要了解3D相关的东西，想自己先入门，至少思维概念要跟得上，所以跟着郭隆邦老师的博客自学一点东西，写相关笔记，方便自己以后复习。
2024-06-15 09:40:58
913
原创 iframe遮盖在最上层，实现“页面跳转”的效果
左侧的树是一个异步的树，用户希望页面跳转离开之后，然后回退，左侧的树任然保持之前离开的状态，由于用户展开的树是任意的，无法做判断，问题：由于业务逻辑操作是在iframe内部的，无法像vue组件那样抛出一个事件。解决办法：iframe 内部调用 父页面的按钮控件来关闭iframe。// 表示当前页面只是 iframe 的弹出层。方法来调用父页面的 document 对象。重点：定义了一个button按钮事件，// 订单显示更多的 url 地址。重点：iframe 通过调用。// 缓存跳转过来的参数。
2024-06-14 12:38:40
858
原创 svg 基本图形（矩形、圆形、椭圆、直线、折线、多边形）
circle 圆形ellipse 椭圆line 直线ployline 折线ploygon 多边形基本图形总结线段：矩形：圆角矩形：圆形：椭圆形：多边形：折线：
2024-05-30 15:04:37
994
1
原创 svg 转png 图片
文章目录文章参考案例vue 案例html 案例文章参考svg 转 图片 base64案例vue 案例<template> <el-button type="primary" @click="savePicture">保存为图片</el-button> <img id="imgBase64" /> <div class="tool-qrcode"> <!-- svg 的头一定要规范，否则保存图片会出错 --
2024-05-30 14:36:59
580
原创 animateMotion SVG动画（四）
animateMotion：路径动画效果（firefox 验证不成功，chrome可以）元素定义了一个元素如何沿着运动路径进行移动。
2024-05-17 17:11:43
624
原创 animateTransform SVG动画（三）
animateTransform元素可以设置目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。animateTransform： 实现transform变换动画效果（
2024-05-17 16:55:06
465
原创 animate SVG动画（二）
auto为默认值，自动判别的意思（实际上是先当成CSS处理，如果发现不认识，直接XML类别处理）。因此，如果你不确信某属性是XML类别还是CSS类别的时候，我的建议是不设置attributeType值，直接让浏览器自己去判断，几乎无差错。我们设置矩形的 rx 属性，让其数值从 0 -> 5 -> 0 不断变化，动画持续时间 3s、动画是无限次（indefinite）我们设置矩形的 cx 属性，让其数值从 0 到 300 不断变化，动画持续时间 5s、动画是无限次（indefinite）
2024-05-17 16:38:18
833
原创 vite5 build模式下scss 路径引入图片不存在的问题解析
下，样式使用绝对路径，不使用别名都能正常显示图片资源，但是在build打包之后,使用路径别名 @， vite 在打包的时候会将路径转换。的写法图片显示不出来。
2024-05-16 17:33:46
380
原创 vue3 vite-plugin-pages根据目录配置路由
在工作中会遇到各种各样关于 vue3 开发的问题，为了方便自己学习和记录相关问题，需要写一些demo，由于日积月累问题比较多，而且非常的零散，针对每个问题写一个页面路由，配置文件太多而且非常琐碎。解决办法： 使用 vite-plugin-pages vite插件，帮忙根据目录结构配置路由。
2024-05-11 11:54:20
470
1
原创 可视化大屏 element-plus el-scroll 滚动条常见问题
通常，设计稿是按照 1920 * 1080 通用的高宽比设计的，开发显示器通常要用F11 全屏模式才能完全看到设计稿的原始效果，因此，在非全屏模式下想查看底部的内容，就需要使用el-scroll 组件来完成。在可视化大屏开发中，经常会用到 element-plus 库的 el-scroll 组件，在此整理一下通常的应用场景，方便自己后续复制代码 和 定位问题。因为可视化大屏是投在大屏上的，很少会有用户去手动操作，因此需要“自动展示”列表信息，就需要实现列表信息的滚动。缺点：耗CPU资源，效率不高。
2024-05-11 11:39:40
503
原创 Vue3 hooks 编写案例
Vue2早期开发的一些可复用的代码库，在Vue3中，使用setup 组合API 如何复用？因此需要将代码改为 hooks，下面的例子提供了编写 hooks 的方法。//减法功能-自定义Hook (将响应式变量或者方法形式暴露出来)//加法功能-自定义Hook（将响应式变量或者方法形式暴露出来）//引入自动hook。//引入自动hook。
2024-04-30 10:40:18
479
2
原创 element-plus的el-image跨域
在项目开发中，使用element-plus UI框架的 el-image 控件，目的是为了查看图片详情（原始图片），由于。，控制台报错，提示跨域。
2024-04-30 10:19:11
421
原创 webpack 如何将 文件引入到 script 标签中
由于项目是webpack打包的，而且项目不像vue-cli脚手架定义了static 目录和index.html文件的位置，只是定义了一个。结论：无法找到，因为没有引入h5player.min.js文件，webpack 是不会把其内容构建进来的。将整个目录拷贝到工程的根目录下，与index.html在统一层级，然后使用script 引入相对路径。文件，需要webpack打包编译 第三方提供的插件。引入script 的代码。
2024-03-22 22:13:56
471
原创 Vue3 echarts tooltip 无法正常显示
在开发可视化项目的时候，使用的是 Vue2 自定义的组件（只需要传入 echarts options）就可以联动产生效果，但是，在开发项目使用的是 vue3+vite 技术栈，反复比对 options 没有问题，但是就是没有效果。最终，将自定义组件改为 Vue3的模式，就正常了代码中的备注方便以后自己理解
2024-03-17 22:30:51
1756
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人