从今年开始写写博客~~

截止至 饿了么 Element Plus 2.8.1版本的组件库，color picker组件不支持自定义颜色选择弹窗里的按钮！只好另辟蹊径解决这个问题。

2、声明拖拽的区域，为该区域html标签添加drop拖拽事件。4、循环文件列表并且判断文件类型。5、最终读取文件后加载图片即可！1、阻止浏览器默认行为事件。3、获取拖拽的文件数据列表。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

fabric 作为一个canvas库，提供了非常高效、直观的API操作，使我们对涉及canvas相关的功能开发效率大幅提升~~~~如：撤销、重做，clipper图形剪辑，拆分图形，对齐图形，任意形式的批量创建，PS钢笔绘制，图片截取，复制粘贴，导入导出数据等；1.简单来讲fabric使我们在平面上绘制图形(直线、圆、折线、路径、文本等)、加载图片、svg等都更加简单、直观；4.可方便的获取、设置任何图形的各个信息，如点坐标、矩阵变化数据、图形类型、颜色、角度、宽高、中心点(包括其他点位)等；

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

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

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

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

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

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

在图形编辑器类型的项目当中，通过键盘触发想要绘制的图形类型，然后通过鼠标在fabric画布上自由绘制你想需要的内容。从画基本的矩形、圆形、直线、文本、三角形、折线等功能中，可以扩展出“钢笔path贝塞尔路径”、“多图形组合”、图形合并、图形拆分、解析svg文件(符合要求的文件皆可)进行导入等较为复杂的功能等。功能对应的全局键盘快捷键、监听画布事件（鼠标按下、鼠标移动、鼠标松开）、初始化图形相关数据并添加进画布、更新画布、计算并更新图形坐标、画布框选功能启用/关闭；

自定义、定制鼠标光标指针样式！除了浏览器提供的鼠标样式，我们还可以借助 cursor: url() 的特性，即可实现定制自己的鼠标样式！​cursor 属性为零个或多个值，多个url()的时候它们之间用逗号分隔，最后必填一个cursor的关键字值。每个指向一个图像文件。浏览器将尝试加载指定的第一个图像，如果无法加载则继续加载下一个图像，如果都无法加载图像或未指定图像，则使用关键字值代表的指针类型。每个后面都可选跟一对空格分隔的数字表示偏移。它们用来设置指针的热

除了浏览器提供的鼠标样式，我们还可以借助 cursor: url() 的特性，即可实现定制自己的鼠标样式！/* 使用 URL，并提供一个关键字值作为备用 *//* URL 和 xy 的坐标偏移值，最后提供一个关键字值作为备用 */cursor 属性为零个或多个值，它们之间用逗号分隔，最后必填一个关键字值。每个指向一个图像文件。浏览器将尝试加载指定的第一个图像，如果无法加载则返回下一个图像，如果无法加载图像或未指定图像，则使用关键字值代表的指针类型。

关联：vue / react / angular / html / js / css用的原生写的，在vue框架之类的地方则使用自己看着改改，两三下改好就能使用了，没啥难度的东西！使用场景：自定义（定制）右键菜单内容，屏蔽浏览器的默认右键菜单。写另一篇文章的时候，刚好碰到跟这个一起配合的东西，就先写下这个了。。。

在上面该文章提到了reactive该api的不方便之处和相关重置数据方法的解析。下面提供的方法就是自己封装的`$reactive`方法，通过该方法返回响应式数据和重置数据的方法。聚焦vue3，但不限于vue，任何前端问题，究其本质，值得讨论，研究与学习。QQ交流群：522976012 ，欢迎来玩。

本项目包含以下内容：单项目类型、vue3、vite、pinia、sass、typescript、eslint、prettier、husky、lint-staged、element-plus、阿里图标库（不采用element-plus的图标库）开箱即用，基本上直接开发对面页面代码即可。为了保证没有太多没必要的项目依赖，仅安装了必要的库。目前只提供了基础的项目模板，像 axios 、动态菜单、语言国际化等其他功能，自己扩展下即可。

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

import { NgModule, Directive, AfterViewInit, ElementRef, OnDestroy } from '@angular/core';import { CommonModule } from '@angular/common';@Directive({ selector: '[nk-ripple]', host: { 'class': 'nk-ripple nk-element' }})

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

本文章目的：快速上手vue3 的 vuex ，并了解各个常用的功能：state、getters、mutations、actions、modules。不常用的和非必要的在此不进行讲述，需要更完善自己的请查看官网。【建议使用Pinia代替vuex > 移步我pinia文章】

【项目架构：vue3 + vite + directive指令模块封装】主要的API：​​​​​​​vite 的 `import.meta.glob()`vue 的 use()、directive()`​​​​​​​export default`增加二级文件目录用来表明对应的指令功能范围：import.meta.glob('./**.ts')

vue3 + vite&webpack + 组合式Api开发；vue-i18n 相关配置；vue-i18n 安装、使用案例、教程、setup Api；

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

本文包含API的TS内容：ref、reactive、customRef、provide、inject、computed、watch、defineExpose、defineProps、defineEmits、withDefaults ....涵盖了主要的组合式 API 的 TS类型。核心：大部分都是运用API函数泛型来定义类型。

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

在了解 `watchEffect` api之前，需要了解在vue中，副作用函数的定义是什么！watchEffect f立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。注意，响应式数据必须要触发get才能劫持为依赖。watchEffect 有2个可传参数 ，并且有返回一个StopHandle函数用来停止侦听。1、第一个参数：（必传）effect 函数，收集依赖，并且立即执行一次;并且 effect 函数可以接受一个 onInvalidate 函数参数

控制更新（处理边界情况）得益于其响应性系统，Vue 总是知道何时更新 (如果你使用正确的话)。但是，在某些边缘情况下，你可能希望强制更新，尽管事实上没有任何响应式数据发生更改。还有一些情况下，你可能希望防止不必要的更新（操作数据，但不更新视图，则不使用响应式数据；或在合适的时机再更新试图）。#强制更新如果你发现自己需要在 Vue 中强制更新，那么在 99.99% 的情况下，你已经在某个地方犯了错误。例如，你可能依赖于 Vue 响应性系统未跟踪的状态，比如在组件创建之后添加了data属性