懮俍-CSDN博客

原创 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 783 1

原创在线flv流截取帧画面转化为图片

当前遇到个需求为在线flv流需要截取帧画面为图片，然后就封装了一个方法，支持在线flv流或者mp4格式截取帧画面转化为base64的图片格式。用到的库为flv.js。

2023-12-25 15:29:13 705

原创 ant design vue Message 用法以及内容为 html片段情况

因为ant design vue中message并不像element-plus中存在。所以需要借助vue3中的。全局展示操作反馈信息。

2023-10-20 13:59:11 1775

原创 Vue3中rem适配方案淘宝flexible在PC端适配

这个函数导入成功后即可在项目中任意地方使用，使用方法为在1920*1024这个设计稿下100px为1rem。最小适配大小为宽度为1024px。2、根据设备像素比率 (devicePixelRatio) 调整页面元素的样式，以支持高分辨率屏幕。1、设置页面的根字体大小 (rem)，以适应不同屏幕宽度。在开发项目过程中注意字体大小最小为12px的适配。3、监听窗口的变化事件，以动态调整字体大小和布局。在main.ts中使用。

2023-10-20 10:45:46 743

原创 echarts内px转化为rem可适应单位

它可以根据不同的屏幕宽度（响应式设计）调整字体大小。这个函数在设计稿宽度为 1920px 时，将根据当前屏幕宽度与最小适配宽度（1024px）之间的最大值来计算一个相对于设计稿宽度的缩放比例，然后将输入的字号（这个函数可以在 Vue.js 或其他 JavaScript/TypeScript 项目中使用，以实现响应式字体大小的设置。您可以在需要的地方导入并调用。函数，以根据屏幕宽度动态调整字体大小，从而使您的网页内容更适应不同的设备和屏幕尺寸。）乘以这个比例以获得最终的字体大小。

2023-10-20 10:37:58 624

原创 Vue3类似qq、微信界面的拖拽功能的组件

最近低代码平台项目有个需求即点击屏幕墙或者左侧菜单资源出现后，页面出现编辑框，并且能够拖动，点击别的资源该菜单内容更改但位置不变，于是封装了这样的组件。因为项目经理需要一个demo能够快速去看，所以写的比较粗糙，见谅一下。点击左侧菜单设置或右侧背景即可出现该背景设置菜单。拖拽同时也做了范围限制。

2023-05-29 15:39:30 279

原创 Vue3颜色选择器

最近项目内需要一个颜色选择器，需要Hex8位，所以根据网上资源还有等自己封装了一个颜色选择器组件，以便后续能够使用等。注意，父组件需要传值color，子组件通过@update:color传值。传值需要传RGBA格式。附上HEX转RGBA 以及 RBGA转HEX方法。

2023-05-29 15:24:18 1050

原创 Vue3基于 rem 比例缩放方案

本缩放方案置于hooks中即可。于App.vue中引入并调用。会在页面DOM结构最外层增加响应式的font-size属性样式更改。

2023-05-29 15:13:55 995

原创前端低代码平台、编辑类项目实现撤销还原功能。

前端用于低代码平台以及编辑器类项目的开发场景逐渐增多，对于这类项目除去复制粘贴功能以外，一般还需要有撤销与恢复的功能。本片文章大致内容就是如何设计一个用户历史操作记录的队列，去便于更好的实现用户编辑的前进后退。在用户后退或前进时，我们可以根据上一步修改的数据，进行对应的恢复，或者逆向修改。首先我们创建一个历史记录类，用一个数组保存数据，用一个变量为指针，指向用户当前的最新操作。首先我们要考虑这个项目的具体类型，用户操作是否是单一的操作类型、数据量是否庞大。在我运营到的项目中、操作类型不单一且数据量大。

2023-03-20 13:23:03 1086 1

原创 Typescript部分知识点

布尔值是最基础的数据类型，在 TypeScript 中，使用定义布尔值类型：注意：使用构造函数创造的对象不是布尔值：事实上返回的是一个对象：直接调用也可以返回一个类型：有时候我们希望一个接口允许有任意的属性，可以使用如下方式：使用定义了任意属性取类型的值。需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：上例中，任意属性的值允许是，但是可选属性的值却是，不是的子属性，所以报错了。另外，在报错

2022-12-23 11:03:47 1126

原创 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 1038 2

原创 JavaScript封装导航栏按键控制匀速移动组件

看了一下项目内的技术栈以及该效果的实现可能性，选择了用jQuery内的scrollLeft()去完成。根据需求需要做一个左右箭头，去控制nav导航栏进行一个长按移动效果去显示已有的nav标签。JavaScript封装导航栏按键控制匀速移动组件。

2022-09-05 10:47:32 295

转载 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 604

原创前端vue3、mock-serve的搭建

模拟服务端接口数据本地环境，一般用在前后端分离后，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。顾名思义，json-server就是个存储json数据的server~。json-server网址。...

2022-07-27 11:06:10 820

原创 Echarts 液位仪（水位仪） vue3组件封装

网上找了一下液位仪感觉不符合项目的样式需求，于是自己封装了一个大致效果为如下图所示鼠标悬浮会出现文字提示、如图所示

2022-07-27 10:48:03 1119

原创解决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 738

原创 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 1125

原创跟Vue2项目的一些随笔电商前台项目

node_modules文件夹：项目依赖文件夹public文件夹：一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动的打包到dist文件夹内src文件夹(程序员源代码文件夹)： assets文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要注意，放置在asserts文件夹里面的静态资源在webpack打包的时候，webpack会把静态资源当作一个模块，打包到js文件里面 components文件夹：一般放置的是非..

2022-02-28 14:13:34 1029

原创想做个电商管理系统。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 304

原创 npm ERRcode ERR_INVALID_PROTOCOL Protocol “https:“ not supported. Expected “http:“

node版本太高了，我是v15.0.1降到v12就可以正常下载依赖了。

2022-01-13 11:31:21 2984

原创版本管理器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 2316

原创 Threejs中的透明对象、模型的重叠部位显示错误

根据需求，制作了一个平面看板，在外部模型之上，但是某些角度常常出现透明对象的模型重叠后显示错误的问题。在threejs中，使用深度缓冲（Z-Buffer）来完成场景可见性计算，即确定场景哪部分可见，哪部分不可见。深度缓冲（Z-Buffer）是一个二维数组，其中的每一个元素对应屏幕上的一个像素，如果场景中的两个模型在同一个像素生成渲染结果，那么图形处理卡就会比较二者的深度，并且保留距离观察者较近的物体在该像素点的渲染结果，这样就形成了近的模型遮挡远的模型的结果。但是就是因为使用了深度缓冲，当场景.

2022-01-07 10:27:00 3808 2

原创 three.js模型之间出现穿模问题

解决方式：材质添加depthWrite: false

2022-01-04 11:34:07 2784 1

原创 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 2881 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 1499 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 1373 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 1711

原创 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 2621

原创 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 586

原创 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 5134

原创 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 602

空空如也

空空如也