- 博客(47)
- 收藏
- 关注
RSS订阅原创 前端Vue3图像编辑功能（并生成mask图）
使用canvas去实现该功能，至少需要三个canvas，第一个将图片铺到canvas上，第二个绘制涂鸦内容，第三个跟随鼠标的光圈。2、鼠标按下出现圆形透明颜色大小同空心圆形、鼠标按下移动形成轨迹，类似涂鸦笔效果，末端是圆形，鼠标松开后涂鸦效果结束。1、鼠标移动上图像画面时出现跟随鼠标移动的空心圆形，移出图像画面、鼠标点击后、鼠标按下移动时消失，鼠标松开再次出现。3、鼠标松开后出现发送框，跟随鼠标松开的位置，鼠标点击后发送框消失。存在一个需求同豆包的图像生成的区域重绘功能，类似与下面这种。
2025-03-18 15:13:13
268
原创 uniapp
@Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE。console.log('顶部下拉刷新s>>>', isLoadingTop.value, isTriggeredTop.value)// this.$api.msg('定位失败,请检查是否开启定位');//当视图渲染结束 重新设置为0。
2025-01-08 16:28:46
669
原创 前端请求音频返回pcm流进行播放
实现方案，因为后端返回的是流式接口，但是流式接口我去截取后用自己完成的流式播放器方法进行播放会存在杂音，但是短句接口返回速度尚可，所以截取需要转音频的短句进行多次调用接口，返回的数据进行处理后存储下来，播放完上一段音频数据后即刻播放下一条。业务场景是chat回答，点击播放则会将回答内容进行请求，返回音频数据流进行播放。注意返回的接口数据是pcm的base64编码格式。
2024-09-24 18:29:41
742
原创 el-table 表格自定义添加表格数据后自动滚动到最底部
动态表格，可以新增行列数，为了用户体验，新增后超出表格流体高度后，自动滚动到最下方。需要element-plus如下api。
2024-08-20 10:46:46
751
原创 vue3脚手架新建vue3项目后，启动项目控制台警告VUE_OPTIONS_API, VUE_PROD_DEVTOOLS are not explicitly defined
vue3脚手架新建vue3项目后，启动项目控制台警告VUE_OPTIONS_API, VUE_PROD_DEVTOOLS are not explicitly defined。
2024-01-03 01:48:04
861
2
原创 在线flv流截取帧画面转化为图片
当前遇到个需求为在线flv流需要截取帧画面为图片，然后就封装了一个方法，支持在线flv流或者mp4格式截取帧画面转化为base64的图片格式。用到的库为flv.js。
2023-12-25 15:29:13
933
原创 ant design vue Message 用法以及内容为 html片段情况
因为ant design vue中message并不像element-plus中存在。所以需要借助vue3中的。全局展示操作反馈信息。
2023-10-20 13:59:11
2396
原创 Vue3中rem适配方案 淘宝flexible在PC端适配
这个函数导入成功后即可在项目中任意地方使用，使用方法为在1920*1024这个设计稿下100px为1rem。最小适配大小为宽度为1024px。2、根据设备像素比率 (devicePixelRatio) 调整页面元素的样式，以支持高分辨率屏幕。1、设置页面的根字体大小 (rem)，以适应不同屏幕宽度。在开发项目过程中注意字体大小最小为12px的适配。3、监听窗口的变化事件，以动态调整字体大小和布局。在main.ts中使用。
2023-10-20 10:45:46
878
原创 echarts内px转化为rem可适应单位
它可以根据不同的屏幕宽度（响应式设计）调整字体大小。这个函数在设计稿宽度为 1920px 时，将根据当前屏幕宽度与最小适配宽度（1024px）之间的最大值来计算一个相对于设计稿宽度的缩放比例，然后将输入的字号（这个函数可以在 Vue.js 或其他 JavaScript/TypeScript 项目中使用，以实现响应式字体大小的设置。您可以在需要的地方导入并调用。函数，以根据屏幕宽度动态调整字体大小，从而使您的网页内容更适应不同的设备和屏幕尺寸。）乘以这个比例以获得最终的字体大小。
2023-10-20 10:37:58
854
原创 Vue3类似qq、微信界面的拖拽功能的组件
最近低代码平台项目有个需求即点击屏幕墙或者左侧菜单资源出现后，页面出现编辑框，并且能够拖动，点击别的资源该菜单内容更改但位置不变，于是封装了这样的组件。因为项目经理需要一个demo能够快速去看，所以写的比较粗糙，见谅一下。点击左侧菜单设置或右侧背景即可出现该背景设置菜单。拖拽同时也做了范围限制。
2023-05-29 15:39:30
396
原创 Vue3颜色选择器
最近项目内需要一个颜色选择器，需要Hex8位，所以根据网上资源还有等自己封装了一个颜色选择器组件，以便后续能够使用等。注意，父组件需要传值color，子组件通过@update:color传值。传值需要传RGBA格式。附上HEX转RGBA 以及 RBGA转HEX方法。
2023-05-29 15:24:18
1379
原创 Vue3基于 rem 比例缩放方案
本缩放方案置于hooks中即可。于App.vue中引入并调用。会在页面DOM结构最外层增加响应式的font-size属性样式更改。
2023-05-29 15:13:55
1123
原创 前端低代码平台、编辑类项目实现撤销还原功能。
前端用于低代码平台以及编辑器类项目的开发场景逐渐增多，对于这类项目除去复制粘贴功能以外 ，一般还需要有撤销与恢复的功能。本片文章大致内容就是如何设计一个用户历史操作记录的队列，去便于更好的实现用户编辑的前进后退。在用户后退或前进时，我们可以根据上一步修改的数据，进行对应的恢复，或者逆向修改。首先我们创建一个历史记录类，用一个数组保存数据，用一个变量为指针，指向用户当前的最新操作。首先我们要考虑这个项目的具体类型，用户操作是否是单一的操作类型、数据量是否庞大。在我运营到的项目中、操作类型不单一且数据量大。
2023-03-20 13:23:03
1510
原创 Typescript部分知识点
布尔值是最基础的数据类型，在 TypeScript 中，使用 定义布尔值类型：注意：使用构造函数 创造的对象不是布尔值：事实上 返回的是一个 对象：直接调用 也可以返回一个 类型：有时候我们希望一个接口允许有任意的属性，可以使用如下方式：使用 定义了任意属性取 类型的值。需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：上例中，任意属性的值允许是 ，但是可选属性 的值却是 ， 不是 的子属性，所以报错了。另外，在报错
2022-12-23 11:03:47
1232
原创 vue项目使用element-ui组件上传文件报错 上传报错upload.addEventListener is not a function Mock数据报错
【代码】vue项目使用element-ui组件上传文件报错 上传报错upload.addEventListener is not a function Mock数据报错。
2022-09-07 15:05:59
1154
2
原创 JavaScript封装导航栏按键控制匀速移动组件
看了一下项目内的技术栈以及该效果的实现可能性，选择了用jQuery内的scrollLeft()去完成。根据需求需要做一个左右箭头，去控制nav导航栏进行一个长按移动效果去显示已有的nav标签。JavaScript封装导航栏按键控制匀速移动组件。
2022-09-05 10:47:32
356
转载 NPM安装命令紊乱？npm 安装中的 i、-g、--save、--save-dev、-D、-S的区别
devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装。参考文NPM install -save 和 -save-dev 傻傻分不清 - 暗夜余晖 - 博客园参考文。
2022-09-05 10:26:30
673
原创 前端vue3、mock-serve的搭建
模拟服务端接口数据本地环境，一般用在前后端分离后，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。顾名思义，json-server就是个存储json数据的server~。json-server网址。...
2022-07-27 11:06:10
924
原创 Echarts 液位仪（水位仪） vue3组件封装
网上找了一下液位仪感觉不符合项目的样式需求，于是自己封装了一个大致效果为如下图所示鼠标悬浮会出现文字提示、如图所示
2022-07-27 10:48:03
1257
原创 解决Joi.Validate is not a function问题、使用最新版本joi、验证表单信息无效
在写博客项目时，需要验证客户端上传的表单信息，所以想到了joi。但是页面发送请求后joi没有进行验证，发现是joi版本的问题，joi原先的validate用法更改了不能再用如下的方法方法的新版用法为const schema = Joi.object({ name: Joi.string().min(3).required().error(new Error('invalid name'))});const result = schema.validate(req.body
2022-04-06 05:27:30
822
原创 This is probably not a problem with npm. There is likely additional logging 报错
网上方法查了很多、很多重复且无效找到了成功的代码npm install --save-dev webpack-dev-server成功运行注：可以npm start chrome指定打开的浏览器
2022-03-05 01:11:36
1169
原创 跟Vue2项目的一些随笔 电商前台项目
node_modules文件夹：项目依赖文件夹public文件夹：一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动的打包到dist文件夹内src文件夹(程序员源代码文件夹)： assets文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要注意，放置在asserts文件夹里面的静态资源在webpack打包的时候，webpack会把静态资源当作一个模块，打包到js文件里面 components文件夹：一般放置的是非..
2022-02-28 14:13:34
1287
原创 想做个电商管理系统。vue init webpack 报错vue-cli · Failed to download repo vuejs-templates/webpack:
一直报错 vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be establishe网上尝试了各种方法，最后下面这个方法解决了问题在想要创建的文件夹内git bush here输入以下命令npm config rm proxynpm config rm https-proxyvue init xxxvue init webpack xxx
2022-01-13 14:41:05
342
原创 npm ERRcode ERR_INVALID_PROTOCOL Protocol “https:“ not supported. Expected “http:“
node版本太高了，我是v15.0.1降到v12就可以正常下载依赖了。
2022-01-13 11:31:21
3203
原创 版本管理器nvm的环境配置和基本使用(详细)
安装地址Releases · coreybutler/nvm-windows · GitHub下载后正常安装需要记住nvm安装路径以及node.js路径nvm是什么？ nvm（node.js version management）是一个nodejs的版本管理工具。nvm和n都是node.js版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。 环境配置 在安装多版本管理工具nvm前需要卸载node.j...
2022-01-12 12:35:52
2475
原创 Threejs中的透明对象、模型的重叠部位显示错误
根据需求，制作了一个平面看板，在外部模型之上，但是某些角度常常出现透明对象的模型重叠后显示错误的问题。在threejs中，使用深度缓冲（Z-Buffer）来完成场景可见性计算，即确定场景哪部分可见，哪部分不可见。深度缓冲（Z-Buffer）是一个二维数组，其中的每一个元素对应屏幕上的一个像素，如果场景中的两个模型在同一个像素生成渲染结果，那么图形处理卡就会比较二者的深度，并且保留距离观察者较近的物体在该像素点的渲染结果，这样就形成了近的模型遮挡远的模型的结果。但是就是因为使用了深度缓冲，当场景.
2022-01-07 10:27:00
4451
2
原创 Vue项目中使用three.js外部引入obj模型
公司项目需要往数字孪生等概念，实现模型展示数据，并且模型能交互然后开始了学习three.js的路程，了解基本概念以后，外部引入obj后缀类型模型一直报错，模型加载老是失败。看了很多博客以及官网案例很少有Vue2的案例，最终还是成功引入了模型<template> <div></div></template><script>import * as Three from "three";import OrbitControls
2021-12-29 10:26:09
3107
3
原创 View UI的使用以及时间选择器更改默认结束时间为23：59：59
是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。安装：$ npm install view-design --save引入 ViewUI：一般在 webpack 入口页面main.js中如下配置：import Vue from 'vue';import VueRouter from 'vue-router';import App from 'components/app.vue';import Routers from './route..
2021-12-21 13:52:40
1660
2
原创 Vue异步处理接口返回数据&&比较对象数组是否相等
开发中遇到了一个问题，数据是接口返回回来才进行赋值，可是数据的逻辑处理在赋值前，这样问题就很大了。js处理异步，因为涉及的方法和接口比较多，于是打算用anync和await来解决问题JSON.stringify(that.oldSourceIdList.sort())===JSON.stringify(checkedSourceList.sort())比较对象数组是否相等JSON.stringify(that.oldSourceIdList.sort())===JSON.string...
2021-12-15 14:03:29
1429
1
原创 Yarn安装后，Vue项目中无法使用Yarn命令
1、安装Yarn配置Yarn用npm安装npm install -g yarnyarn config set registry https://registry.npm.taobao.org -gyarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g不出意外的话当你想在项目里启动项目时，你会发现这时1：搜索powershell，以管理员方式运行powershel..
2021-12-15 14:03:05
1938
原创 sql语句模糊查询以及时间区间筛选
最近做了个接口参数是是查询数据库的项目，恶补了一下sql语句模糊查询（最简单写法%任意%）select * from log where seatname like'%192.168.15.121%'有一个需求是查询数据库开始时间字段在两个时间选择器选定时间区间内的所有数据根据每条数据的创建时间倒叙查询，然后考虑性能（数据库数据过多）我还做了分页查询功能，所以sql语句比较长 sql=`SELECT * FROM log where username like '%${prams}%'
2021-12-15 11:23:01
2749
原创 element-ui时间选择器更改标准时间格式为自定义
getDateString(date) { let year = date .getFullYear() .toString() .padStart(4, "0"); let month = (date.getMonth() + 1).toString().padStart(2, "0"); let day = date .getDate() .toString() .pad.
2021-12-15 11:16:51
620
原创 Vue——rules动态判定require布尔值及1-255正则表达式
场景复现：有一个输入框的是否必须输入取决于上面控制他显隐的选择框如何动态的影响rules的require呢？最开始我是写到了data中rules:{ deviceName: [ { min: 0, max: 18, message: '设备名称长度不得长于18位', trigger: 'blur'} ], ip:[ { required: true, message: '请输入ip地址', tr..
2021-12-15 11:12:11
5442
原创 JSON解析以及深拷贝的简便方法
JSON.parse (JSON.stringify (obj)) 我们一般用来深拷贝，其过程说白了 就是利用 JSON.stringify 将js对象序列化（ JSON字符串 ），再使用 JSON.parse 来反序列化 (还原)js对象；序列化的作用是存储 (对象本身存储的只是一个地址映射，如果断电，对象将不复存在，因此需将对象的内容转换成字符串的形式再保存在磁盘上)和传输（例如 如果请求的 Content-Type 是 application/x-www-form-urlencoded ，则前端这边需
2021-11-30 11:04:12
645
原创 ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol ...以及如何打开MySQL终端。
书接上回，数据库（Mysql）与node.js绑定时出现了问题ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client简而言之，就是Mysql8.0版本之后与登录数据库的客户端不兼容了，8.0密码认证采用了新的密码格式解决方式：打开mysql终端输入：ALTER USER 'root'@
2021-11-29 17:24:04
1749
3
原创 Vue2查询数据库
新到手的一个Vue2项目，只有一个接口，参数是sql语句，因为要加需求，问了前辈得知该项目自测用mock不方便（只能查询），前辈写了一个简单的node本地服务器（前后端不方便联调）var mysql = require('mysql');var express = require('express');var bodyParser = require('body-parser');var app = express();app.use(bodyParser.json());var
2021-11-29 17:09:42
1601
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人