自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

小多的博客

一起学习,一起分享

  • 博客(274)
  • 资源 (2)
  • 收藏
  • 关注

原创 在vscode中运行Hbuilder创建的项目

想必习惯使用vscode的人突然使用HBuilder很不习惯吧,但是HBuilder创建的项目本身没有调试功能。

2023-07-21 16:33:13 5431 14

原创 基于el-input的数字范围输入框

在做筛选时可能会出现数字范围的筛选,例如:价格、面积,但是elementUI本身没有自带的数字范围组件,于是进行了简单的封装,不足可自行进行优化满足功能:相关代码:

2023-04-28 14:50:24 3188 1

原创 vue中使用闭包(例如防抖和节流)失效问题(直接调用)

原因:这个和vue的事件绑定原理有关。如果直接在函数体内部使用的话,结果就是,一个匿名的立即执行函数来进行执行。由于每次触发点击事件都会返回一个新的匿名函数, 就会生成一个新的函数执行期上下文(称之为执行栈),所以就会防抖/节流就会失效。防抖/节流使用无效,(例如防抖,按钮点击多次依旧执行多次)----> 查看是闭包无效,定义的局部变量依旧为初值。----> 没有相应清除定时器。// 以下方法调用不生效。

2023-02-08 15:20:29 2015

原创 Nginx基本使用

zlib 库提供了很多种压缩和解压缩的方式, nginx 使用 zlib 对 http 包的内容进行 gzip ,所以需要在 Centos 上安装 zlib 库。OpenSSL 是一个强大的安全套接字层密码库,囊括主要的密码算法、常用的密钥和证书封装管理功能及 SSL 协议,并提供丰富的应用程序供测试或其它目的使用。make 是一个命令工具,它解释 Makefile 中的指令(应该说是规则)。,所以需要在 linux 上安装 pcre 库,pcre-devel 是使用 pcre 开发的一个二次开发库。

2023-02-06 14:27:06 690

原创 Linux基本使用

硬链接:我们知道,文件的基本信息都存储在 inode 中,而硬链接指的就是给一个文件的 inode 分配多个文件名,通过任何一个文件名,都可以找到此文件的 inode,从而读取该文件的数据信息。软链接:类似于 Windows 系统中给文件创建快捷方式,即产生一个特殊的文件,该文件用来指向另一个文件,此链接方式同样适用于目录。:查看文本内容(适合大文件)指定解压后的文件存放的位置。:查看文本内容,适合小文件。:用来查看当前目录文件。:查看当前命令所在目录。:移动文件或修改文件名。此时可以全局安装pm2。

2023-02-03 17:51:02 627

原创 vue3学习笔记之router(router4 + ts)

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。它们只注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用。属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据。能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。进行页面的跳转会同样也会创建渲染新的Vue组件,但是在。要将嵌套路由添加到现有的路由中,可以将路由的。记住,如果你需要等待新的路由显示,可以使用。,这将有效地添加路由,就像通过。作为第一个参数传递给。

2023-02-01 22:56:14 2626

原创 Pinia的使用(以vue3+ts+vite为例)

由于有了底层 API 的支持,Pinia store 现在完全支持扩展。不能直接解构,会失去响应性,pinia提供了。同步异步方法都可以,也可以进行互相调用。重置state初始值,注意只在。I有用,setup函数模式报错。使其解构响应性不丢失。

2023-01-30 10:15:00 2545 4

原创 vue3性能优化

一般前后端数据交互是前端发送请求,后端返回数据。缺点是每次获取新数据都需要提交新请求。实现是根据后端数据的改变推送新数据到前端,运用场景一般图表展示,图表数据实时变化。后端数据返回过多时,但不想分页或过滤优化,原理是删除可视区域外的DOM节点。VueUse 库已经集成了 webWorker —谷歌浏览器自带的 DevTools。也可以全局安装Lighthouse。的,所以可以使用这个插件进行包分析。

2023-01-20 10:09:55 2435

原创 Electron + vite + vue3简单实现

/ 渲染进程接收主进程传递信息。接收渲染进程传递数据,通过。'主进程传递信息 :>> '// 渲染进程传递主进程信息。接收/传递信息主进程。

2023-01-19 15:21:58 3229 3

原创 vue3学习笔记(总)——ts+组合式API(setup语法糖)

接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 。也可以获取属性 的浅层作用形式。1.4 triggerRef()强制触发依赖于一个浅层 ref 的副作用,这通常在对浅引用的内部值进行深度变更后使用。强制更新注意: ref()和shallowRef()不能一块写,不然会影响shallowRef 造成视图更新由于 ref底层调用了triggerRef(),所以会造成视图的强制更新1.5 customRef()创建一个自定义的 ref,显式声明对

2023-01-18 16:28:18 7158

原创 vite+vue3环境变量的配置

直接打开 dist 文件下的 index.html 不行会报跨域错误,可以使用。文件中自定义了越来越多的环境变量,你可能想要在代码中获取这些以。另外,Vite 执行时已经存在的环境变量有最高的优先级,不会被。为前缀的用户自定义环境变量的 TypeScript 智能提示。类文件会在 Vite 启动一开始时被加载,而改动会在。为前缀的变量才会暴露给经过 vite 处理的代码。应为这些环境变量在打包的时候是会被硬编码的通过。一份用于指定模式的文件(例如。默认情况下,Vite 在。Vite 在一个特殊的。

2023-01-18 14:36:28 4910

原创 unocss原子化

例如,ml-3(Tailwind),ms-2(Bootstrap),ma4(Tachyons),mt-10px(Windi CSS)均会生效。预设(实验阶段)是一系列流行的原子化框架的 通用超集,包括了。安装图标库,根据地址栏后缀安装对应图标库。属性语义化 无须class。

2023-01-18 09:12:12 775

原创 vue3学习笔记之样式穿透(:deep)及CSS 新特性(:soltted、:gloabl、v-bind、mouldCSS)

的方式,以保证唯一(而这个工作是由过PostCSS转译实现的),达到样式。标签会被编译为 CSS Modules 并且将生成的 CSS 类作为。渲染出来的内容,因为它们被认为是父组件所持有并传递进来的。通过在DOM结构以及css样式上加唯一不重复的标记。:全局选择器,定义全局样式,不用单开一个没有。默认情况下,作用域样式不会影响到。常用场景:一般用于TSX和渲染函数。:改变css解析时私有属性的位置。自定义注入名称(多个可以用数组):在子组件定义样式插槽内容样式。常见作用场景:修改组件库样式。

2023-01-17 09:26:06 9199

原创 vue3学习笔记之TSX的使用

绑定事件按照React的风格来。构建的,所以安装的是。

2023-01-12 16:44:20 6013

原创 vue3学习笔记之Transition&TransitionGroup

height : 0;} .to {传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用,比如

2023-01-10 11:28:51 1852

原创 vue3笔记案例——Teleport使用之模态框

理想情况下,我们希望触发模态框的按钮和模态框本身是在同一个组件中,因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。使用 传送组件可以将组件传送至其他层级的DOM结构中父组件模态框组件结合了动画组件,实现模态框显示消失的动画效果

2023-01-04 09:35:37 620

原创 git push报错 ! [rejected] dev -> dev (non-fast-forward)

是本地库和远程库没有同步导致无法提交合并,冲突导致无法push。

2023-01-03 14:05:13 3294

原创 vue3笔记案例——Suspense使用之骨架屏

suspense的使用

2023-01-02 22:59:42 757

原创 npm install 安装依赖包 --save、--save-dev、-S、-D的区别以及与yarn命令的对比

dependencies:运行依赖,字面意思运行需要的依赖,生产环境下也必须存在。devDependencies:开发依赖,只在开发时存在,不会打包至生产环境中。,将依赖安装至运行依赖。,将依赖安装至开发依赖。

2022-12-28 11:18:23 3262

原创 js如何获取json数据的方法总结以及在不启动服务的情况下获取数据

可以将json文件数据写在js文件中并定义成全局变量,然后再其他js文件中使用即可。

2022-12-15 09:50:10 4772

原创 vue——监听鼠标中键(滑轮)滚动

实现场景:通过滚动中键切换图片等

2022-12-05 14:00:56 4504

原创 网站变成灰色——grayscale

网站变成灰色有很多办法,但相比于换内容样式\UI而言,使用滤镜更为方便使用的灰度属性

2022-12-05 09:44:29 269

原创 vue指令之滚动动画

实现可视区域添加删除动画类名。为了更好的动画效果使用了。

2022-11-30 11:07:55 814

原创 根据children内的指定key找父级的key

运用场景:如刷新菜单默认展开。

2022-10-30 18:19:32 308

原创 redux Toolkit(TypeScript版本)之基本使用

组件使用时将原来的,换成和即可import {

2022-10-28 11:44:47 694

原创 antd按需引入——vite-plugin-style-import -D

由于vite已经是按需引入antd组件,但没有按需引入样式所以需要插件。

2022-10-26 16:30:26 2488

原创 vite配置别名@以及别名输入提示

若还报错则可能是vite版本问题 改成。如果 path 报错,可以安装。

2022-10-26 15:13:17 1125

原创 elementUI-el-input聚焦时按回车回刷新页面

el-form表单只有一个输入框,按回车默认触发提交按钮,导致提交刷新页面。在el-form表单中加。输入框中按回车页面刷新。

2022-10-24 09:51:56 868

原创 『前端必备』本地数据接口—json-server

是一款小巧的接口模拟工具,一分钟内就能搭建一套 Restful 风格的 api,尤其适合前端接口测试使用。只需指定一个 json 文件作为 api 的数据源即可,使用起来非常方便,30秒入门——可以对接口数据进行增删改查。进阶操作还支持分页,排序等操作。开源地址主页地址Github项目地址。

2022-10-17 16:48:51 1052

原创 后端返回文件流格式数据导出成Excel文件

【代码】后端返回文件流格式数据导出成Excel文件。

2022-10-09 14:40:29 450

原创 redux Toolkit的使用

Redux Toolkit 有一个名为 createSlice 的函数,它负责生成 action 类型字符串、action creator 函数和 action 对象的工作。您所要做的就是为这个切片定义一个名称,编写一个包含 reducer 函数的对象,它会自动生成相应的 action 代码。来消除手写Redux逻辑中的“样板文件”,防止常见错误,并提供简化标准Redux任务的API.

2022-09-30 09:45:12 264

原创 react使用createContext()和useContext()实现组件传值

Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用,因为这会使得组件的复用性变差。

2022-09-29 16:11:06 571

原创 CSS+SVG实现简单的点赞效果

先看看效果图:通过改变 svg 的 属性实现点赞效果

2022-09-26 14:29:28 469

原创 删除Linux使用rz命令上传文件后产生的一些乱码文件

可能是文件中包含控制字符。

2022-09-23 09:15:34 850

原创 常见CSS鼠标悬浮动画-hover属性

鼠标移入盒子,盒子向上移动并出现底部阴影。鼠标移入盒子放大并出现底部阴影。鼠标移入盒子,盒子右下角卷起。

2022-09-19 15:14:19 3266

原创 瀑布流布局之columns属性

columns 是 column-width 与 column-count 的简写属性。columns 属性是一个速记属性设置列宽和列数。

2022-09-19 10:47:29 540

原创 动画效果:实现卡片翻转抽奖动画(正反面内容不一样)

根据不同条件动态添加实现动画效果首先,为卡片列表添加一个是否翻转的元素 分别设置正反两面的样式及内容翻转动画一:完整代码动画二:完整代码

2022-09-16 14:56:10 1222

原创 替换富文本编辑器转换字符串的图片属性

【代码】替换富文本编辑器转换字符串的图片属性。

2022-09-15 10:58:44 115

原创 Element之el-date-picker表单校验(数组类型数据校验)和数据回显问题

/ type: 'string', //tpye类型试情况而定,所以如果返回的是date就改成date。,后续修改和清除都会失效。// 刷新input。

2022-09-14 11:50:03 2962

原创 vue之使用IntersectionObserver API实现封装滚动动画组件

className自定义动画类名mode表示执行一次,表示执行多次,持续监听

2022-09-09 14:08:07 731

vue-hooks-可缓存的方法

基于vue计算属性实现的可以缓存的方法(可以传递参数的计算属性),应用场景:例如表格渲染大量数据,但是一列的数据是根据行计算出来的,改变是只需要针对那一行数据改变而改变,不用全部重新计算一遍

2023-09-06

captureFrame:截取视频转化为图片的方法

使用场景,用于上传图片时设置视频封面,视频封面选取视频关键帧的图片,传入一个视频文件和时间,获取该时间的视频画面图片

2023-08-03

imghover_图片触摸hover效果

图片触摸效果,适用于触摸图片出现图片描述的动画场景,实现常见的hover动画效果

2022-09-22

mysql的配置文件my.ini

mysql的配置文件

2022-01-17

promise.js自定义封装,包含构造函数以及class封装

想了解promise封装的人

2022-01-10

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除