- 博客(54)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 踩坑记 更新修订记录（当前最新2021.10.26）
记录一下踩坑记的更新修订，便于查阅。（修错别字、语句等不计入更新）2021.8.12更新：踩坑记11，坑36（npm、更新包），添加简化版的包更新方式。链接：踩坑记11 vue3 组件化 watchEffect component组件 @element-plus/icons el-icon npm和yarn更新包_Alloom的博客-CSDN博客2021.8.13更新：踩坑记6，坑18（vue3、vue-devtools beta），添加build时error的解决方法（将rm -rf替换.
2021-08-13 09:41:11
162
原创 el-icon 最新使用指南 SVG Icon @element-plus/icons-vue vue3 统一导入及注册el-icon组件 在各带图标组件中使用 component组件动态加载图标
2021.8.5Element Plus 团队表示正在将原有组件内的 Font Icon 向 SVG Icon 迁移，正式版本Font Icon将被弃用，于是目标是对代码进行对应的更新，Font Icon换成SVG Icon。文档：组件 | Element (element-plus.org)注意：当前图标只适用于vue3。首先更新 element-plus版本，指定安装@1.0.2-beta.69（2021.8.5时的最新版...
2021-08-05 13:47:46
38382
43
原创 《JavaScript 核心原理解析》学习笔记 Day 15 this 对象实例的创建
在JavaScript 中，类和一般的构造器函数创建对象实例 this 的过程并不完全相同。首先，函数的 prototype 属性是可修改的。当它被修改为 null 时，其子类对象是以 null 为原型的；当它被修改为非对象值时，其子类对象是以 Object.prototype 为原型的；而当它是一个对象类型的值时，其子类会使用该对象作为原型来创建实例。
2023-01-30 18:20:20
2986
原创 《JavaScript 核心原理解析》学习笔记 Day 14 new 构造器
最早的 JavaScript 没有继承。JavaScript 1.0 中可以将函数作为构造器，并且在函数中向它的实例（也就是 this 对象）抄写类声明的那些属性。构造器函数即为类，而被创建出来的实例即为对象。JavaScript 一方面使用了类继承的基础结构和概念，另一方面又要实现原型继承和基于原型链检查的逻辑。instanceof 运算被实现为一个动态地访问原型链的过程，它将从对象所属类的 prototype 属性逆向地在原型链中查找指定的原型，因此能确定某个对象是否是某个类本身或其子类的实例。
2023-01-29 23:07:35
1191
原创 《JavaScript 核心原理解析》学习笔记 Day 13 作用域 对象
在JavaScript 中，向没有声明的变量名赋值，会隐式地创建一个全局变量；全局变量会被绑定为全局对象（global）的属性。因此，JavaScript 的变量环境（或者全局环境）与对象系统就关联了起来。而对象闭包和函数闭包实现的环境被称为域（Scope）。所谓“使用 with 语句创建一个对象闭包”就简单地被实现为“向既有的作用域链尾加入一个新的 scope”。
2023-01-28 23:10:51
1014
原创 《JavaScript 核心原理解析》学习笔记 Day 12 ECMAScript 中语句执行和表达式执行的统一
ECMAScript 的目的是描述引擎如何实现，而不是描述语言是什么。在 JavaScript 语言层面，引擎是一个执行器，引擎的核心是一个表达式计算的、连续的执行过程。所以，JavaScript 的语句执行，本质上也是一个或一组表达式计算过程，而且所有的计算都必须能描述成“用操作符去处理操作数”这一基本的模式。即执行过程最终是表达式计算。而计算则有其返回，语句执行返回完成记录，表达式执行返回引用记录。
2023-01-27 23:09:12
348
原创 《JavaScript 核心原理解析》学习笔记 Day 11 throw 语句完成状态与返回值
在 JavaScript 中，语句有五种完成状态（normal, break, continue, return, 以及 throw）。Nomal（缺省状态）大多数情况下是不被读取的；break 和 continue 用于循环和标签化语句，不携带返回值；return 则是用于函数的返回值；throw（异常抛出）不拦截捕获会终止程序运行。其中 return 和 throw 两个状态是确保返回时携带有效值（包括 undefined）的；其他的完成类型则可能在返回时携带空值（empty）。
2023-01-26 23:35:49
732
原创 《JavaScript 核心原理解析》学习笔记 Day 10 yield 生成器函数与执行上下文
生成器函数被调用后，并不会直接执行函数体中的内容，只是生成一个暂停状态的迭代对象。调用迭代对象的 next 方法后，才开始执行函数体中的内容。在执行到 yield 时，生成器函数会暂停挂起，直到下一次调用迭代对象的 next 方法才会继续执行之后的内容。另外，yield 作为表达式时，其值为下一次调用 next 方法时传入的值。
2023-01-25 22:46:07
152
原创 《JavaScript 核心原理解析》学习笔记 Day 9 ... 展开语法 迭代
在JavaScript中，... 常被称为扩展运算符或展开运算符，但 ...x 不是表达也不是语句。... 是展开语法，在语义上用来展开一个可迭代的对象。在 ...x 中，x 是可迭代对象，并且会通过一个迭代变量来管理其迭代过程。而迭代过程，并不是一个语法执行的过程，可以理解为一组函数执行的过程。其结束行为也就可以理解为函数内的异常或退出。迭代过程中，退出 （return）是执行过程的，而异常 （throw）是外部的。
2023-01-24 22:49:23
67
原创 《JavaScript 核心原理解析》学习笔记 Day 8 函数中的变量与执行
在JavaScript中，从静态视角来看，函数是由参数、执行体、结果这三个语义组件构成的实体。而当函数内声明的变量的名称与其形参名称重复时，var 声明并不会创建新的变量，仅发生赋值；而 let 声明会在函数声明时就报错，提示标识符已被声明过。函数不可使用与形参相同名称的变量作为参数缺省时的默认值，虽然函数仍能成功声明，但调用时缺省参数会报错。因为函数内部会以形参名称声明变量，在根据传入值进行初始化前，这些变量是不可访问的。其默认值使用与形参相同名称的变量时，其访问的就是函数内未完成初始化的变量，即会报错。
2023-01-23 23:32:22
109
原创 《JavaScript 核心原理解析》学习笔记 Day 7 可执行结构 模板 函数参数
JavaScript 中的模板，是除语句和表达式以外的另一种可执行结构。函数参数也是一种可执行结构，包括缺省参数、剩余参数和参数展开。另外，模板字面量可用于触发函数执行（一般不这么做），并且会作为函数参数传入。
2023-01-22 23:45:58
71
原创 《JavaScript 核心原理解析》学习笔记 Day 6 中断与标签 break label
JavaScript 中的break 可中断循环语句和 switch 语句，其效果是跳转到下一语句。而带标签的 break label 可用在被 label 标记的块语句中。并且对于 if / else if / else 语句和 try / catch / finally语句而言，其每一个块中都可以使用标记到 if 或 try 的 break label。在函数内的try / catch / finally语句中使用 break 时，其会在函数 return 前执行。
2023-01-21 23:45:07
180
原创 《JavaScript 核心原理解析》学习笔记 Day 5 块级作用域
JavaScript 中的块级作用域，除 with 语句和 for 语句外，基本可以通过大括号 {} 分辨。若在循环语句中使用大括号，则会生成对应循环次数的块级作用域。但for 循环语句中不使用大括号也可能（不是一定）会生成块级作用域。在 for 循环的条件中无变量声明或使用 var 声明变量，不会生成块级作用域；使用 let /const 声明变量 / 常量时，则会生成与循环次数相对应的块级作用域。
2023-01-20 23:47:12
120
原创 《JavaScript 核心原理解析》学习笔记 Day 4 声明语句与对象中函数 function 的名称 name
在 JavaScript 中，有具名函数和匿名函数之分，匿名函数即其name属性为空字符串。通过 var 使用变量声明函数时，若声明语句右侧函数表达式中的函数为匿名函数，则最终声明的可访问函数的名称为左侧的声明的变量名；若声明语句右侧函数表达式中的函数为具名函数，则最终声明的可访问函数的名称为右侧具名函数的函数名，并且无法通过右侧的函数名访问最终声明的函数。在对象生成时通过字面量添加的函数属性，其名称表现基本同声明语句；但之后通过变量名访问对象添加函数属性时，其函数的名称完全由右侧的函数表达式决定。
2023-01-19 23:18:39
165
原创 《JavaScript 核心原理解析》学习笔记 Day 3 连续表达式中的引用
在连续表达式中，JavaScript 的计算方向是从左到右的。所以在表达式中进行连续赋值时，左侧已计算完毕的引用并不会随右侧的赋值表达式运算而更新。
2023-01-18 23:38:59
82
原创 《JavaScript 核心原理解析》学习笔记 Day 2 未声明变量 变量声明与词法声明
六种声明用语句：let、const、var、function、class、import。变量声明（varDelcs）与词法声明（lexicalDecls）。var 声明的变量不能用 delete 删除，但被赋值的未声明变量可用 delete 删除。eval() 中使用 var 声明的变量可以通过 delete 删除。词法名字列表（lexicalNames 列表）中的项都是不可移除的，也就无法通过 delete 删除。
2023-01-17 23:46:51
1118
1
原创 《JavaScript 核心原理解析》学习笔记 Day 1 delete 引用与值
在 javaScript 中一个表达式的值或者说结果，可能是引用 / 值。所以 x = x ，是将右侧表达式x的值赋值给左侧表达式x所指的引用。注意此处的引用并非为到具体内存地址的指向，而是指表达式与其值的一种关联。delete 仅会对于对象的属性生效。区分清楚其作用的对象和属性即可确定其效果。另外对于null 和 undefined 进行 delete 操作时，表现不同。因为 null 是一个关键字，直接对应到值；而undefined 是一个只读的全局变量，是通过引用获取到值 undefined。
2023-01-16 23:00:54
193
原创 踩坑记32 vue3 拖拽边缘调整侧边栏宽度 拖拽条组件 宽度限制
2021.9.28坑93（vue3、拖拽边缘调整侧边栏宽度、拖拽条组件、宽度限制）：目标是实现可拖动调整大小的右侧边栏。重要参考： 模板引用 | Vue.js (vuejs.org)预计通过ref、emit实现，分离拖拽条组件和侧边栏组件。（考虑过将拖拽条组件写在侧边栏组件内，与原侧边栏组件并列，这样就无需通过父组件获取ref，但会提示非根组件的@mousedown可能无效果）参考：vue组件间通信六种方式（完整版） - SegmentFault 思否Vue3.0：如何在父组件中调用
2021-10-21 20:19:22
2298
原创 踩坑记31 npm install 更新依赖 报错 npm ERR! ERESOLVE unable to resolve dependency tree
2021.9.27坑92（npm、更新依赖、error）：用npm更新如下依赖时报错。@vue/compiler-sfc^3.2.11→^3.2.19element-plus^1.1.0-beta.10→^1.1.0-beta.16ncu没检测到的（因为是next版本）： vue^3.2.11→^3.2.19npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable t...
2021-10-20 18:34:30
16561
2
原创 踩坑记30 el-table 树结构对齐 包括无子节点的树节点 | vue3 setup 生命周期 数据初始化
2021.9.26坑90（el-table、树结构与非树结构对齐）：目标是对齐树结构与非树结构的el-table。主要使用padding-left 实现。现在有一个el-table，采用树型结构显示，其中部分数据有子节点，部分数据无子节点。首先参考了ElementUI el-table组件 树形数据不对齐的解决方案_无枫的博客-CSDN博客 选择类名不含有 el-table__row--level- 字段在内且有el-table__row类名的元素的某个显示展开箭头的列中的格子（被选中的格...
2021-10-19 19:19:15
2197
原创 踩坑记29 一些用于 el-cascader 的工具函数
2021.9.24坑89（el-cascader）：一些配置el-cascader 时写的工具函数。允许选任意一级选项：配置 :props="{ checkStrictly: true }"参考： Cascader 级联选择器 | ElementPlus (element-plus.org)// 获取适用于el-cascader级联选择器的数据树，传入data为树结构数组，children为其中对象的子树数组export function getTreeForCascader(d..
2021-10-18 19:31:42
265
原创 踩坑记28 el-table default-sort属性 sort() 排序 & toggleRowExpansion 折叠 展开 & el-icon 导入报错 组件名与html元素名重复
2021.9.23坑86（el-table、default-sort、排序）：el-table 表格的自动/手动排序。自动：el-table自带能力。手动：自写排序函数处理事件。el-table自动排序参考文档： Table 表格 | ElementPlus (element-plus.org) 排序Sorting部分。在表格上设置 default-sort 属性即可自动排序，类型为对象。prop 排序属性，order 排序方式，类型都为字符串。// descending 降序 ...
2021-10-17 22:53:42
9667
原创 踩坑记27 vue3 @click 绑定多个事件 | props传输函数死循环 改用emits | ref数组 | template中不能直接使用console.log()
2021.9.22坑81（vue、@click、绑定多个事件）：@click 绑定多个事件，中间逗号隔开即可，参数各自传输。代码如下：@click='function1,function2(para)'参考：vue中@click绑定多个事件_YanHSama的博客-CSDN博客_@click绑定多个事件坑82（vue、props、emits、触发函数）：问题场景是父组件使用props传输函数到子组件运行，会死循环（原因不明）。以add函数为例，主要代码是父组件中以属性式绑定函数:.
2021-10-15 21:56:23
3740
原创 踩坑记26 vue3 props 默认值 | el-form 禁用 个别元素例外
2021.9.18坑79（props、默认值、vue3）：组件传props，设置默认值。props: {isDisabled: {type: Boolean,default:false,},},坑80（el-form、禁用）：目标是对el-form表单整体禁用，但其中个别元素不禁用。解决方案：内嵌一个el-form表单，其中的元素不会被禁用。<el-form :dis...
2021-10-14 20:20:36
1917
原创 踩坑记25 javaScript Array.isArray() 判断数据是否是Array类型 | vue3 ref 在template和script中的不同用法
2021.9.17坑77（Array、判断数据类型、javaScript）：判断数据类型是否为数组Array。用typeof返回的是object。采用Array.isArray() 方法判断。let arr=[1,2,3]Array.isArray(arr) // true参考：js如何判断数组是Array类型 - ~零度~ - 博客园 (cnblogs.com)坑78（ref、vue3）：使用ref类型获取组件元素时，在script中需要通过value获取属性，而在templa.
2021-10-12 22:57:20
1392
原创 踩坑记24 el-form label 对齐方式 | v-click-outside 组件外点击触发 | el-popover click激活 点击外部/取消隐藏 element-plus
2021.9.16坑74（el-form、label、对齐方式）：el-form 设置标签 label 的对齐方式 label-position 属性为 right 或 left 时，需同时设置标签宽度 label-width 属性。若无设置，标签 label 的宽度会随标签内容自动调整，无对齐效果（ label 看似左对齐，但内容头部不会对齐，会贴着 label ）。默认对齐方式为 right ，右对齐。可选值为right、left、top （ label单独在内容上方一行 ）。参考：Fo...
2021-10-11 22:59:48
5684
原创 踩坑记23 javaScript delete 删除对象中某一属性 | JSON 深拷贝对象
2021.9.15坑72（javaScript、delete、删除对象中某一属性）：使用delete操作符即可， delete 操作符用于删除对象的某个属性。成功删除返回 true，失败返回 false。let obj={ name:'coco', color:'black', size:'big' }// 执行delete操作delete obj.color // truedelete obj[size] // true// 此时，obj={name='coco' }，...
2021-10-10 21:36:17
884
原创 踩坑记22 顶部进度条 基于nprogress的umi-plugin-nprogress-runtime插件 自动监听网络请求 在vue中使用
2021.9.9坑71（vue、进度条、nprogress、umi-plugin-nprogress-runtime、自动监听网络请求）：目标是在页面加载和网络请求时显示顶部进度条。踩坑：开始使用了nprogress包，安装npm install --save nprogress。安装及使用参考： nprogress的简介及使用教程 - Made with Vuejs 。官网： NProgress: slim progress bars in JavaScript (ricostacru..
2021-10-03 16:16:58
609
原创 踩坑记21 div 固定宽高比 padding-bottom | style scoped 时 :deep(.el-input__inner:focus) | javaScript 八进制
2021.9.7坑67（div、css、固定宽高比）：目标是使div元素在缩放时宽高比固定。因为垂直方向上的内外边距使用百分比做单位时，是基于包含块的宽度来计算的。所以使用padding-bottom实现宽高比固定的元素块。实现：divBox实现固定宽高比，divContent则为其中内容，实现内容定位。.divBox {/* 相对位置，定位基于该元素原先位置 */ position: relative;/* 宽:高=4:3 */ width: 40%;heigh...
2021-09-07 17:25:50
589
原创 踩坑记20 element-plus 默认语言设置 | el-pagination 分页器自动换行 | vue-router Maximum call stack size exceeded
2021.9.6坑64（element-plus、语言配置）：element-plus默认语言是英文。而目标是配置语言为中文。参考文档组件 | Element (element-plus.org)国际化，可以很快配置完成，代码如下：// main.jsimport ElementPlus from 'element-plus'import zhCn from 'element-plus/es/locale/lang/zh-cn'app.use(ElementPlus, { loca..
2021-09-06 22:44:44
1881
原创 踩坑记19 element-plus 根据视口尺寸隐藏元素 | vue3 v-model props emit 二次封装el组件 | vite import 路径 Vetur报错
2021.9.3坑61（element-plus、根据视口尺寸隐藏元素）：文档要求引入文件import 'element-plus/lib/theme-chalk/display.css'，其中地址错误，查看包文件结构后，确认地址应该为：import 'element-plus/theme-chalk/display.css';地址改变的原因是element-plus更新到1.1.0-beta.1版本的时候的变化。详细见：Breaking changes made in 1.1.0-bet..
2021-09-03 17:22:32
964
原创 踩坑记18 vue 组件折叠 v-show | 深度合并对象 deepmerge | el-checkbox-group size设置无效 | el-form中元素高度、垂直间距不统一
2021.9.1坑57（组件折叠）：简单实现向左折叠，无动画。效果是点击带箭头的长条（加了背景色方便查看）改变折叠状态。思路是外层包裹flex自动左到右排列，使用v-show控制内层元素显示，图标使用@element-plus/icons。<template><div class='viewBox'><AItem v-show="isShowAItem" /><div class='ArrowForAIt...
2021-09-01 22:04:38
1668
原创 踩坑记17 更新vue3.1.x到vue3.2.x 及 配套更新element-plus 等包 | 1.1.0-beta.7版本element-plus引入组件及样式
2021.8.30坑56（npm、yarn、ncu、vue3.2.x、升级包、esbuild、element-plus）：主要是完成之前未完成的vue到3.2.x的更新（因为element-plus当时依然是基于3.1.x版本的vue，更新后会报错，详见 Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue.js?v=50ccac76‘ does not provide_Alloom的博客-CSDN博客；现在element
2021-08-30 17:29:24
7274
1
原创 踩坑记16 vue-router4 动态路由 刷新404/白屏/样式错误 next css | 退出登录 removeRoute()后 router.options.routes未更新
2021.8.16坑53（vue3、vue-router4、动态路由、刷新404或白屏、next）：简略版：（tips：不只刷新会出问题，输入网址导航也会）1、刷新404：将匹配全部为定义路径到404的路由从静态路由表中去除，在动态权限路由都添加了之后在添加。接下来可能会报warn并白屏，解决方法见下一条2。2、刷新白屏：如果是在路由守卫router.beforeEach中检测并用router.addRoute添加的路由，则需要将动态权限路由添加后的next()放行，改为next(to)触发
2021-08-16 10:15:55
10350
13
原创 踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件，不能使用别名alias
2021.8.12坑50（vue-router4、addRoute()、router.options.routes未更新）：进行动态权限获取菜单的设置，使用了addRoute()来添加路由，但是router.options.routes未更新，依然只有原来的路由列表值。相关API简要介绍：addRoute()，添加一条新的路由记录到路由，文档：API 参考 | Vue Router (vuejs.org)router.options.routes，应该添加到路由的初始路由列表，文档： AP.
2021-08-12 17:22:44
11376
5
原创 Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue.js?v=50ccac76‘ does not provide
关键词：vite2、vue3、element-plus问题产生：当前vue3版本3.1.5，更新了以下三个包后：@vitejs/plugin-vue，1.3.0到1.4.0@vue/compiler-sfc，3.1.5到3.2.2element-plus，1.0.2-beta.69到1.0.2-beta.70运行出现error，如下：Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.j
2021-08-12 14:01:15
21713
6
原创 踩坑记14 vs code 快捷键 | vue3 vite2 alias 别名设置
2021.8.11坑46（vue3、组件命名）：目标是将多组件组成的主页面集中到一个文件夹内，例如pages/home文件夹，其中放置主要引用文件index.vue和其他组件比如UserOperate.vue等，此时，index.vue中导出的name应该依然试用'Home'。// 例一 pages/home/index.vue<script>export defalut { name:'Home'}</script>// 例二 pages/lo..
2021-08-11 17:24:25
1048
原创 踩坑记13 css 子元素充满父元素 | el-tree 折叠与展开、高度、滚动条
2021.8.10坑42（css、子元素充满父元素）：目标是通过css使html子元素充满父元素。其中，height: 100%需要父元素有高度设置才起效。如下设置即可：.box {width: 100%;height: 100%;}坑43（el-tree、高度充满父元素）：目标是使el-tree元素的高度充满父元素。普通使用，单个el-tree组件：首先尝试设置height: 100%，无效果，el-tree的高度依然为内容高度。之后外包一层div设置其高...
2021-08-10 17:34:43
3429
原创 GIT 简要使用指南 克隆、分支、提交
一、具体步骤：第一步，到本地存放各个git仓库的文件夹，gitStore；打开git Bash，克隆远程仓库，git clone xxx-yyy，注意不需要用git init来初始化仓库，克隆包括了初始化。第二步，进入刚刚克隆的git项目文件夹，xxx-yyy；打开git Bash，（git branch 查看当前本地分支，）创建与远程仓库目标提交分支的对应分支，git branch develop；切换分支，git checkout develop。第三步，复制要提交的文件到git项目文件夹，
2021-08-09 08:46:57
326
原创 vue3踩坑记 未填之坑 汇总（最新2021.9.2 填坑60）
坑41【暂未填，记录于2021.8.6，对应链接】（el-menu、collapse、el-aside、折叠动画）：目前将el-menu嵌套在el-aside中的，el-aside的宽度根据菜单的折叠情况，设置为64px或220px。观察实际渲染的菜单元素，折叠到展开其宽度是瞬变；而在展开转变为折叠时，根据el-menu的collapse-transition属性，true（默认）宽度慢慢变小，false瞬变。于是一开始的目标使el-aside的宽度随el-menu的宽度变化，提升显示效果的动态感。但之
2021-08-06 16:24:42
261
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人