自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

从今年开始写写博客~~

拒绝无意义瞎内卷

  • 博客(76)
  • 资源 (1)
  • 问答 (1)
  • 收藏
  • 关注

原创 【vue3 路由使用与讲解】vue-router : 简洁直观的全面介绍

vue-router,动态路由,动态添加路由addRoute,命名路由name,路由重定向redirect,路由传参params,query,组合式Api,路由跳转页面router-link,push,replace,获取路由参数,路由导航守卫,路由模式,路由缓存,嵌套路由,路由别名,声明路由

2024-03-02 03:43:15 1476

原创 vue3.4新特性:v-bind同名简写、defineModel

在上一篇 vue3.3 文章中,虽然写了 defineModel ,但并未考虑到写的时候3.4版本里defineModel 才作为稳定的API正式加入( 两年没看vue3 更新的内容了... ),并增加了对支持修饰符相关的内容;基于此,如果在vue3.3的版本里使用defineModel碰到某些错误的话,也许就会是该版本不支持,vue3.4也算是较为重要的一个小版本吧,建议还是使用3.4而不是3.3defineModel是配合父子组件使用的,所以下面分为2个代码块作为案例演示用法:

2024-02-29 21:59:05 619

原创 vue3.3 版本新特性总结 defineOptions、defineModel、defineSlots、defineEmits

新特性主要围绕着父子组件之间的相关的功能更新。本文主要以代码展示的风格来介绍功能。大家可以直接搞个父子组件,把对应代码复制粘贴进去,然后一个个试验即可。自己也动动手,加深理解。除了标题的4个宏指令,还有 toRef 和toValue,但让我挺无语的。。感觉没啥用,求指教。。以下案例包含的vue3.3新内容:defineOptions、defineModel、defineSlots、defineEmits、toRef、toValue

2024-02-29 21:08:32 775

原创 【vue3】命令式组件封装,message封装示例;(函数式组件?)

仅做代码示例;当然改进的地方还是不少的,仅作为该类组件封装方式的初步启发;理想大成肯定是想要像 `饿了么` 这些组件库一样。

2024-02-29 01:25:02 812

原创 vue3跨组件(多组件)通信:事件总线【Event Bus】

【vue3/vue2】event库概述:本次所使用到的库为通用库,若在node环境使用则无需npm安装,本身自带的;浏览器环境下使用才需要npm安装。events库是从 Node.js 上移植Events模块的功能,因此可用的API完全一致(除了仅限在node环境下使用的API);若想进一步深入,去看node官网的event文档即可。(注意版本差异!根据npm文档的描述,该库目前并未同步最新Node里对应的events模块)在VUE3的官方文档中描述到:【平级组件或是跨越多层嵌套的组件间通信,

2024-02-08 10:32:07 3059

原创 Fabric 画布缩放、拖动、初始化大小

作为自己项目的基础功能之一,自然是需要第一个回顾记录的了!1.拖动画布2.缩放画布3.监听窗口大小变化,从而初始化画布位置、大小涉及相关API:键盘快捷键功能、滚轮功能、监听窗口变化、fabric.js相关事件及API;

2023-12-08 11:29:46 1814

原创 【vue3】defineSlots, useSlots, $slots 记录/讲解

【vue3】defineSlots, useSlots, $slots 记录/讲解。插槽 <slot> / v-slot 的使用与讲解。仅支持 Vue 3.3+ 的版本。就因为新增了这API,让我写了这文章。其他功能描述同 $slots 一致。这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。defineSlots() 只接受TS类型参数,没有运行时参数。也就是说你项目不是TS的话,就不用看这个了。它还返回slots对象,该对象等同于在 setup 上下文中暴露或由us

2023-08-02 18:35:51 7438

原创 项目架构:eslint 代码检测、提交代码审查

项目代码开发规范配置;项目代码 git commit 提交时自动检测是否符合规范;

2022-12-01 17:40:01 1482 1

原创 项目架构:prettier 提交检测、全局||自动格式化代码

1、每次保存文件后自动格式化;2、每次提交代码前运行命令进行全局格式化;3、每次提交代码时自动对提交的文件进行代码格式化;

2022-12-01 17:19:15 2049

原创 项目架构:husky + lint-staged + eslint - git提交前自动检查代码

拒绝代码潜在错误,尽量减少代码屎山,从我做起~~目前该方法在 git 提交代码前时,无法检测处理ts 类型报错,Ts相关报错由于不是eslint的报错,所以无法处理。如果有小伙伴们知道解决方法的,欢迎告知、交流~~(个人使用的是vite)

2022-09-19 22:38:09 706

原创 【vue3组件之 keep-alive 功能细节讲解】优先级、生命周期、离开&再度激活、缓存销毁

注意事项:1.优先级:如果`exclude`和`include`内都有同个组件名,`exclude`优先级高于`include`2.缓存销毁:`max`当已缓存的组件数量超过`max`值,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。3.生命周期:被缓存的组件才会调用`activated` 这些缓存相关的生命周期 ,换句话说就是`exclude`内的组件不会触发activated!!4. 离开组件、再度激活:当组件在`

2022-04-04 23:45:41 4822

原创 【vue3 之 emits & $emit() 讲解 】监听子组件事件、emit事件验证、options写法、composition setup写法

emits 可以是数组或对象,从组件触发自定义事件,emits 可以是简单的数组,也可以是对象。1、数组形式和对象形式的值为null,表示该emit事件无验证函数。2、对象形式且值为函数表示该 emit 配置了事件验证 验证函数必须有return 真假值,真值表示通过验证,假值则 vue 会自动抛出 warn 警告!不 return 值默认当做失败,抛出 warn 警告! 验证函数主要就是验证参数是否正确,并不会在 return false 时中断emit() 事件!

2022-04-03 23:18:34 25597 1

原创 【vue3 组件生命周期流程 & 功能】13个生命周期详解

单一组件、父子组件的生命周期。仅限开发环境下有效的生命周期。不讲SSR的生命周期:serverPrefetch。也就是只讲客户端的13个生命周期!this的数据:除了`beforeCreate`,其他12个生命周期的 this 都能获得组件实例对应初始化完成的内容。`beforeUpdate()` 永远只在所有父子组件的 `mounted() `之后才会触发!例子里的生命周期根据功能进行了划分,生命周期的顺序都标了数字!setup() 调用时间,与调用时间相关功能的讲解。onMounted之类的

2022-02-27 22:01:38 5179

原创 【vue3 Pinia使用与讲解】vue3新一代的Store应用工具

本文章旨在快速帮助上手Pinia基础与核心部分。Pinia 的主要 Api * createPinia - Plugins * defineStore * storeToRefs * mapState * mapGetters * mapActions * getActivePinia- Store的核心配置: + State + Getters + Actions与 Vuex 相比,Pinia 提供了一个更简单的 API,没那么死板。

2022-02-24 01:21:41 12706 3

原创 vue3 `inheritAttrs`属性继承与`$attrs`使用与讲解

当template有根元素的时候,绑定到组件上的属性和事件会自动继承到根元素上。当组件返回单个根节点时,非 prop 的 attribute 将自动添加到根节点的 attribute 中。同样的规则也适用于事件监听器:如果组件是片段(多节点),并且组件标签绑定了attr和事件,都不会继承,并且会抛出警告!也就是说,片段组件需要将 inheritAttrs 设置为 false。当然不设置为 false 也有个好处,抛出警告告诉编程人员,这个组件是多节点的!你对该组件标签设置的 attr 和 事

2022-02-12 00:23:41 6343 3

原创 【vue3 <script setup> props 使用与讲解】defineProps、withDefaults | ts类型限制、默认值设置

本章主要涉及api内容:defineProps、withDefaults;defineProps 只能是要么使用`运行时声明`,要么使用`类型声明`。同时使用两种声明方式会导致编译报错。;defineProps、withDefaults 是只在 <script setup> 语法糖中才能使用的编译器宏。他不需要导入且会随着 <script setup> 处理过程一同被编译掉。withDefaults 只能与基于类型的defineProps声明一起使用;参数类型、默认值、是否必传、自定义验证。

2022-01-28 00:55:10 56051 15

原创 【深入vue3 之 directive 指令的使用与讲解】

自定义全局指令:实例app.directive()参数:{string} name{Function | Object} [definition]返回值:如果传入 definition 参数,则返回应用实例。如果不传入 definition 参数,则返回指令定义。用法:注册或检索全局指令。自定义指令概念:在 Vue 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。自定义指令是vue提供给我们用原生DOM封装一系

2022-01-26 23:19:13 21971 8

原创 【VUE3 之 v-model 绑定子组件的 新特性讲解 & 使用】绑定单个&&多个 v-model、自定义修饰符

本章内容:v-model绑定子组件的默认方式、绑定多个v-model、自定义v-model修饰符。讲解知识点:`v-model`参数、多个`v-model`绑定、自定义`v-model`修饰符自定义修饰符:对于带参数的 v-model 绑定,生成的 prop 名称将为 arg + "Modifiers",然后`[参数名]Modifiers.[修饰符名]`使用`props`的内容:`[参数名]`,自定义修饰符的为`[参数名]Modifiers``emits`的内容:`update:[参数名]`

2022-01-10 15:35:34 3614 1

原创 【vue 3 之 `watch()` & `$watch()` 侦听器的使用与讲解】各侦听源&各配置参数案例讲解

watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源,并在单独的回调函数中执行副作用。默认情况下,它也是惰性的——即回调仅在侦听源发生变化时被调用。缓冲回调:缓冲回调不仅可以提高性能,还有助于保证数据的一致性。在执行数据更新的代码完成之前,侦听器不会被触发。简单来说,同步修改数据时,修完操作执行完毕后才会触发回调。注意是同步!所以异步操作的时候,要注意多次触发watch的问题。(所有同步操作为1次,异步操作有几次就触发

2022-01-10 14:36:28 1857

原创 【激光雕刻机上位机的成品软件】核心功能 - 参考wecreat

体验软件如上,自行下载体验。价格5W,本人为 wecreat 创立之初上位机软件开发的核心员工,详细内容私信我。由于该公司快3个月未给我竞业补偿了,对我不仁那我也不必客气。届时所有协议作废时,正式卖,我会从0写一份 图形编辑器那部分的功能(也就是最重要的核心功能),百分百不侵权,毕竟要是侵权,我也怕有麻烦。他的3个功能,素材首页、个人中心、编辑器,编辑器才是重点!耗费开发精力的部分!其他2个在开发上来说都还是小问题,而且涉及素材侵权我也不会提供该部分的功能。再三声明,出售范围仅限非侵权的部

2024-06-02 16:09:55 197

原创 (Vue3+TS+Volar) 全局组件配置类型声明的最佳实践

简评:Volar官方全局组件的推荐写法,基于Volar,必须安装该插件,GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件:使用GlobalComponents类型接口声明类型。

2024-05-14 19:02:10 422

原创 【element-plus】自动导入 + typescript 提示 + 自定义主题色

第三步:使用组件库时获取ts类型提示 > tsconfig.json 文件的 types 添加ts文件路径。编辑器安装 Volar 插件(新名字 Vue - Official)第一步:安装自动导入功能所需的插件。2、引用加载组件类型提示。

2024-05-11 16:15:24 366

原创 【JS】web浏览器访问本地系统字体列表

1、核心API: queryLocalFonts;以下为主要注意事项:注意浏览器最低版本需用户授权网站是否安全,若不安全默认禁止获取本地字体列表# 代码讲解if ("queryLocalFonts" in window)用来判断用户浏览器版本是否可调用queryLocalFonts方法。但是!如果该网站不安全,那么谷歌浏览器强制禁止获取系统字体,queryLocalFonts方法一定为undefined

2024-05-07 19:56:56 461

原创 获得fabric.js的ts类型声明提示

1、安装fabric的TS声明库:npm i --save-dev @types/fabric2、重启编辑器。3、点赞收藏来一波

2024-04-10 15:46:48 160

原创 【vue-router 路由篇】 传入私有数据给目标路由地址而不显示在url上

也许还有另一个场景,不方便缓存路由时,返回上级路由时,上级路由又不一定要重调接口获取数据(直接使用缓存数据),则也可以通过该方式传个判断值给目标进行判断(虽然也可以在pinia vuex之类的里面存相关变量去判断,但需要不断的修改该变量,这种算是下下策)。也许你会碰到这样一个场景,在【返回上级路由,或者跳转目标路由】时,在部分场景下如果临时需要传给目标路由相关数据,则这篇文章必定会对你有所帮助。

2024-03-16 01:50:27 318

原创 vue2 / vue3 路由(返回&跳转)时判断 + 取消跳转

vue2 / vue3 路由(返回&跳转)时监听表单变化,提示相关信息,取消跳转等

2024-03-16 00:57:20 342

原创 Vue3 重置&覆盖 reactive 数组数据的方法

核心要点:通过splice删除原数组内的所有数据,并添加新的数据进去。潜在影响:大数据量下,splice重置数组和 ref 的.value重新赋值重置数组,哪个耗时短还需自行测试。通过 `splice` 传入0 和 Infinity 来删除原数组从头到尾的内容,然后`...[]`将新数据丢进响应式数组里。

2024-03-06 16:33:12 1237

原创 【axiox】前后端接口通讯数据交互

重要全局配置:axios.create(); 设置axios请求的公共配置信息。service.interceptors.request.use((config)=>{}) 请求拦截器service.interceptors.response.use((res)=>{},(err)=>{}) 响应拦截器const source = axios.CancelToken.source(); 用来取消接口请求的。

2024-03-02 04:12:07 462

原创 【JS】indexedDB基本入门使用;

本文基本仅做个人简单学习记录;

2024-02-28 15:35:30 252

原创 【JS运算符/表达式】`?.` `??` `...` `,` `&&=` `||=` `?:`等运算符讲解

逻辑与赋值(&&=);逻辑或赋值(||=) ;空值合并运算符(??);逻辑空赋值(??=);可选链运算符(?.);... 展开语法;逗号运算符(,);条件(三元)运算符;自增、自减的前缀式后缀式;delete;取余 %;加法赋值运算符 +=;加减乘除;

2024-02-25 22:52:29 197

原创 【JS解构】数组解构、对象解构

而且解构语法直接的特性基本都是能一起使用的!例如 xx: newXX = '默认值'

2024-02-25 19:10:40 326

原创 【颠覆旧知识】JS的原型链搜索原则;

在当前对象未找到该属性,就一直向上查找,找到就停止并返回该数据,如果直到object的原型也没找到,就返回undefined ,如果是调用方法就报错, 该 xxxx 不是一个函数。直到某个的原型的值为null都没找到该属性的话则终止,然后返回 undefined ,如果是调用方法就会导致报错, xx is not a function。没想到是在搜索过程中遇到原型的值为null时,就停止,并不是就会一直查找到Object的原型才停止;在当前对象未找到该属性,就沿着原型链向上查找,找到就停止并返回该属性,

2024-02-25 18:00:11 761

原创 【CSS:长度】绝对长度单位 与 相对长度单位

相对长度单位相对于其他一些东西,比如父元素的字体大小,或者视图端口的大小。使用相对单位的好处是,经过一些仔细的规划,你可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了 web 开发中一些最有用的单位。这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如,我们通常不会在屏幕上使用。长度单位——它们与其他任何东西都没有关系,通常被认为总是相同的大小。惟一一个你经常使用的值,就是。

2024-02-24 20:32:45 422

原创 【CSS】设置文字(文本)的渐变色

第一步 设置渐变颜色background: linear-gradient(278.83deg, #5022bd 31.42%, #8636d1 75.55%); // 先设置渐变色背景;第二步 设置颜色的使用范围background-clip: text; // 背景被裁剪成文字的前景色。-webkit-background-clip: text;第三步 将文字颜色设置为透明,这样即可暴露出文字的渐变色背景;color: transparent;// 如果你的需求不涉及切换字体颜色可

2024-02-18 17:41:24 774

原创 【canvas】实现画布橡皮擦功能、并解决擦除不连贯问题;

简单介绍橡皮擦功能思路,代码demo自己看看就好了,一点都不复杂:确认橡皮擦大小,可动态设置;鼠标按下记录点击的坐标,然后根据设置的橡皮擦大小画一个圆,最后清除该圆形区域坐标范围的颜色信息;然后创建鼠标移动事件;按下后鼠标移动过程中对移动的轨迹坐标进行清除颜色信息。移动过程中,为了解决鼠标移动事件响应是有时间间隔的,导致正常情况下鼠标快速移动时出现橡皮擦擦除颜色不连贯的问题,为此需要每次擦除需记录上个坐标点,然后对当前坐标点连起来,连起来的范围就是要擦除的坐标范围;鼠标松开销毁移动事件;

2024-02-09 10:43:34 828

原创 【Fabric.js】监听画布or元素的点击、选中、移动、添加、删除销毁、变形等各事件

例子就用vue项目组件里的代码,fabric的使用跟vue、react、angular之类的框架都没任何关系!代码中监听事件回调函数里的第一个参数,根据事件的不同,有目标图形信息、坐标信息等,自己一看就看得懂了,不讲解;在fabric使用过程中,如果想要玩各种花样,那么fabric的事件监听是一定、必须、肯定要掌握!并且本demo只对功能进行讲述,实际项目使用肯定要进行封装,别直接就照抄导致写的丑!代码只简单介绍一些常用的目标监听事件,更全面的、更多花样的玩法自行查阅官网即可~~

2024-02-08 11:41:33 1786

原创 【canvas】获取鼠标点击位置坐标的颜色信息

核心API为getImageData,传入4个参数,前2个为点击坐标xy,后2个都传1;表示以当前点击位置为起点,取宽为1、高为1的像素范围信息;在项目当中,要实现某业务需求例如PS魔棒功能时,则需要获取点击坐标的颜色信息。功能不复杂,代码也很少,一看便知~~

2024-02-08 11:13:11 314

原创 【fabrc.js】 创建组(fabric.Group)类型的 3 种方式

方法1:先选中已存在画布内多个图形,然后拿到ActiveSelection数据,随后调用 `toGroup()` 即可将选中的图形创建为组对象;方法2:new fabric.Group() 获取group实例,通过new的时候传入图形参数[o1,o2...],然后将group实例add到画布上;方法3:在方法2的基础上,group实例也可通过addWithUpdate将图形添加进组里。上述3种方法使用时对应多种不同的场景,根据当前需求进行选择其中一个方式即可;

2024-01-31 16:46:45 879

原创 【fabric.js】toDataURL 性能问题、优化

toDataURL 性能问题、优化;吐槽:当时解决大量图形的性能瓶颈,解决完虚拟化列表后,自测时还是发现某些情况下(某些素材)加载时、操作时有性能问题,当时找了半天最后才发现是 toDataURL 导致的性能问题;情景:在做某些功能的时候涉及到图形的预览,预览的时候是导出为40*40 像素的图片,当碰到某些图形非常小的时候,例如该图形是0.01宽/0.01高,那么如果想要得到该图形40*40大小的图片则需要放大非常大的倍数 multiplier,从而导致 toDataURL 一个函数就需要执行1秒(根据放大

2024-01-26 19:01:14 1246

原创 【NodeJS & JS】动态加载字体的各方式及注意事项;

方案1:创建 style 标签,写入@font-face{font-family: 'xxx';src: url('xxx')} 等相关字体样式;将style标签添加到body里;方案2:通过 new FontFace() 进行字体加载,然后通过相关API进行检测加载情况;方案1的适用场景:适合一次性加载所需字体;自己对应功能读取字体结构信息不依赖浏览器的真实加载情况;对加载字体的延迟情况无要求;方案2的适用场景:适合完全加载好字体再执行某功能,避免字体还原显示异常(例如我项目所用的fabric库

2024-01-26 18:26:56 651

vue2生态之vuex3的深入学习资料

涉及内容:State、Getters、Mutation、Action、Module、命名空间、mapState等等一系列api的详细使用方式。

2022-02-24

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

TA关注的人

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