摘要：
vite.config.js 配置 import { fileURLToPath, URL } from "node:url"; import Components from "unplugin-vue-components/vite"; import AutoImport from "unplug 阅读全文
摘要：
要将 base64 编码的图像数据保存为 PNG 文件到本地，可以借助 JavaScript 和浏览器的 File API。以下是一个简单的步骤和示例代码： 步骤： 解析 Base64 数据：将 Base64 编码的字符串解析为二进制数据。 创建 Blob 对象：使用解析后的二进制数据创建一个 Bl 阅读全文
摘要：
SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 格式标记语言，它可以被浏览器直接渲染。SVG 图形具有良好的可伸缩性和清晰度，非常适合用于图标、图表、地图等应用场景。以下是编写 SVG 的基本语法和示例： 1. SVG 基本结构 SVG 图形可以直接写 阅读全文
摘要：
CSS 自定义属性（Custom Properties），也称为 CSS 变量，是 CSS 中一种能够保存和复用值的机制。它们与常规的 CSS 属性不同，因为它们可以在整个文档中定义一次，然后在需要的任何地方使用。 定义和语法 定义一个自定义属性使用两个连字符（--）开头，后面跟着属性名，类似于下面 阅读全文
摘要：
在 ES5（ECMAScript 5）中，JavaScript 函数有几种继承方式，主要是通过原型链实现的。以下是常见的几种继承方式： 原型链继承（Prototype Inheritance）： 原理：通过将子类的原型对象设置为父类的实例来实现继承。 特点：可以继承父类的实例方法和属性，但无法实现多 阅读全文
摘要：
js super作用 在 JavaScript 中，super 关键字有两个主要用途： 在子类的构造函数中调用父类的构造函数： 使用 super() 来调用父类的构造函数，并继承父类的属性。 在子类的方法中调用父类的方法： 使用 super.methodName() 来调用父类的方法。 示例解释 使 阅读全文
摘要：
在 TypeScript 中，一个类（class）可以拥有以下几种类型的属性： 实例属性（Instance properties）： 这些属性是在类的构造函数中使用 this 关键字定义的。 每个实例都有自己独立的实例属性。 原型属性（Prototype properties）： 这些属性是定义在类 阅读全文
摘要：
在 JavaScript 中，函数对象可以拥有多种类型的属性。主要可以分为以下几类： 实例属性（Instance properties）： 这些属性是在通过函数构造函数创建实例时绑定到实例上的属性。 原型属性（Prototype properties）： 这些属性是绑定到函数对象的原型上的属性。实例 阅读全文
摘要：
在 TypeScript（以及 JavaScript）中，bigint 和 number 是两种不同的数值类型，它们有一些显著的区别和特性。 区别和特性 表示范围： number：表示标准的双精度 64 位浮点数，可以表示的范围是从 -Number.MAX_SAFE_INTEGER 到 Number 阅读全文
摘要：
Tree shaking 是一种优化 JavaScript 或 TypeScript 代码打包输出的技术，其主要目的是移除代码中未使用的部分（即死代码），从而减小最终生成的文件大小，提升应用程序的性能和加载速度。 Tree Shaking 的工作原理包括以下几个关键步骤： 静态分析： Tree sh 阅读全文
摘要：
在 JavaScript 中实现归并排序可以通过递归的方式完成。归并排序使用了“分而治之”的策略，将数组递归地分成两个子数组，分别进行排序，然后将它们合并成一个有序数组。以下是一个简单的归并排序实现： function mergeSort(arr) { // 如果数组只有一个元素或为空，则直接返回数 阅读全文
摘要：
在JavaScript中实现快速排序可以通过递归方式来完成。下面是一个示例代码： function quickSort(arr) { // 如果数组为空或只有一个元素，则无需排序 if (arr.length <= 1) { return arr; } // 选择基准元素（这里选择中间元素） con 阅读全文
摘要：
冒泡排序是一种简单的排序算法。它重复地遍历待排序的列表，比较相邻的元素并交换位置，如果它们的顺序错误。这个过程会重复进行，直到整个列表排序完成。下面是用 JavaScript 实现的冒泡排序算法： function bubbleSort(arr) { let n = arr.length; let 阅读全文
摘要：
二分算法搜索数字 二分搜索算法是一种在有序数组中查找目标值的高效方法。其时间复杂度为 (O(\log n))。下面是用 JavaScript 实现的二分搜索算法： function binarySearch(arr, target) { let left = 0; let right = arr.l 阅读全文
摘要：
require.context 是 Webpack 提供的一个方法，用于创建自己的（上下文）模块。这些模块可以动态导入符合特定条件的文件。在使用 require.context 时，你需要提供三个参数： directory: 要搜索的文件夹路径（字符串）。 useSubdirectories: 是否 阅读全文
摘要：
当然，以下是将前面两个步骤汇总到一起的完整实现方案： 1. 定义指令 首先，在 src/directives 文件夹中创建你的自定义指令文件。例如，v-focus.ts 和 v-color.ts： v-focus.ts： import { Directive } from 'vue'; const 阅读全文
摘要：
树形数组转一维数组 要将一棵树结构（包含 children 属性）拍平为一个一维数组，可以使用递归或迭代的方法。下面是两种常见的实现方式： 1. 使用递归 function flattenTree(tree) { let result = []; tree.forEach(node => { res 阅读全文
摘要：
unplugin-vue-components 简介 unplugin-vue-components 是一个用于自动导入 Vue 组件的插件，能够在 Vue 3 项目中简化组件的使用，无需手动导入每个组件。它支持按需加载，提高开发效率。 安装 使用 npm 或 yarn 安装插件： npm inst 阅读全文
摘要：
unplugin-auto-import 简介 unplugin-auto-import 是一个用于自动导入常用函数和变量的 Vite 和 Webpack 插件。它可以帮助开发者减少手动导入的麻烦，提高开发效率。 安装 使用 npm 或 yarn 安装： npm install -D unplugi 阅读全文
摘要：
当然可以！下面是使用 TypeScript 语法的动态表单弹出组件示例。 1. 创建动态表单弹出组件（TypeScript） <template> <el-dialog :visible.sync="visible" title="表单" @close="handleClose"> <el-form 阅读全文
摘要：
概论 ts中Array Object 既可以是数据值，也可以是类型 在 TypeScript 中，确实有些语法上的重叠，使得 Array 和 Object 可以同时表示数据值和类型。让我们来看一些具体的情况： 数组 (Array) 1. 数据值： const arr1: number[] = [1, 阅读全文
摘要：
代码 global.d.ts global中声明全局类型 declare global { /** * 响应数据 */ interface ResponseData<T = any> { code: string; data: T; msg: string; } } //加入export 就可以使g 阅读全文
摘要：
概论 null 就是一个变量为空，未赋值,比如var abc=null; undefined 就是未定义，就是属性还未声明，比如 var abc={}; abc.d 就是undefind未定义,或者变量声明了，确还未赋值过。 一般一个变量声明了，但是空值，用null比较适合，比如 var abc=n 阅读全文
摘要：
参考代码 <el-form ref="ruleFormRef" :hide-required-asterisk="true" :model="broker" :rules="rules"> <div v-for="(item, index) in broker.education" :key="in 阅读全文
摘要：
原因 原因是element plus form 组件的ref名字和表单reactive变量数据同名了 参考文章 https://blog.51cto.com/u_15127677/4350477 阅读全文
摘要：
代码 class myPromise { constructor(syncFn) { this.callbacks = []; //resolve 的目的是调用下一个then中的函数 const resolve = (value) => { const nextThenFn = this.callb 阅读全文
摘要：
报错方式 对象可能未定义的处理方式优化 使用 Optional Chaining: 这是处理对象属性可能为 undefined 的推荐方式，特别是在 TypeScript 中： let targetId = arrD.find((i) => i.name "tom")?.id; console.lo 阅读全文
摘要：
代码 <template> <div class="box">childB</div> </template> <script lang="ts" setup> import { reactive, watch, ref } from "vue"; const data1 = reactive({ 阅读全文
摘要：
概论 defineEmits 用来定义子组件暴漏给父组件的自定义事件 测试代码 子组件 <template> <div class="box">child</div> </template> <script lang="ts" setup> interface Emit { (e: "emitfn1 阅读全文
摘要：
自动导入vite配置 需要安装： npm install -D unplugin-vue-components unplugin-auto-import vite.config.ts配置 // vite.config.ts import { defineConfig } from 'vite' im 阅读全文
摘要：
安装 # 使用 npm npm install pinia@next # 使用 yarn yarn add pinia@next 代码使用 store代码 import { ref, computed } from 'vue' import { defineStore } from 'pinia' 阅读全文
摘要：
MutationObserver 是一个用于观察 DOM 树变化的接口，可以监测节点的添加、删除、属性变化等。以下是如何使用 MutationObserver 的基本示例： 1. 创建一个 MutationObserver 实例 // 创建一个观察者实例 const observer = new M 阅读全文
摘要：
树形数据拍平实现代码 js实现函数 function tree(arr) { var newarr = []; arr.forEach(item => { if (item.childrens) { newarr.push(...tree(item.childrens)) delete item.c 阅读全文
摘要：
代码测试 js代码 const rowData = reactive({ nameAbc: 'sdfsdf' }) console.log(rowData, "rowData") let rowDataValue = toRaw(rowData); console.log(rowDataValue, 阅读全文
摘要：
常见配置参考 { "editor.fontSize": 20, // 编辑器字体大小 "terminal.integrated.fontSize": 18, // terminal 框的字体大小 "editor.tabSize": 2, // Tab 的大小 2个空格 "editor.formatO 阅读全文
摘要：
设置里面搜索typescript:validate 既可打开或者关闭ts语法错误提示 阅读全文
摘要：
tsconfig.json "compilerOptions": { "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度 "tsBuildInfoFile": "./buildFile" 阅读全文
摘要：
代码示例 可以通过ref变量实现绑定$ref,或者getCurrentInstance来获取$refs /** * $ref 使用方式，变量名和组件的属性ref值一致 */ const hChildRef = ref() console.log(hChildRef, "hChildRef") con 阅读全文
摘要：
debounce 防抖使用示例 代码 import {debounce,DebouncedFunc} from "lodash" const myDebounce:DebouncedFunc<(a:string)=>{}>=debounce((a)=>{ console.log(a,"debounc 阅读全文
摘要：
概论 代码测试 // 普通数组 let uuy:Array<number>; uuy=[23,23423,23423423] let uud:[] // let uua:array; //报错，不能这样声明数组 //从右往左是越子级内容 let uuv:number[][] //二维数组 uuv=[ 阅读全文