孤独而灿烂的神
立志做人参的萝卜🥕
获得徽章 1
- #青训营笔记创作活动#
2月21日打卡day39
就是那种文字根据不同的色块显示不同的颜色，我想着能不能做一个探照灯似的 404 页面呢。毕竟也可以根据不同的白色光照来改变文字颜色的。
颜色阴影部分都是一样的，不一样的地方就在于宽高和动画时长。 大家可以根据自己的想法去修改不同的宽高和时长哦 动画效果需要额外写一下的哦 展开评论点赞 - #青训营笔记创作活动#
2月20日打卡day37
另外，我们必须知道，vue中key运用的地方------配合v-for使用。key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。另外，key的唯一性可以被map数据结构充分利用，时间复杂度仅为o（1）。展开评论点赞 - #青训营笔记创作活动#
2月19日 打卡day35
先实例化一个 DisplacementFilter 类，把纹理错位图传入进去，然后把这个过滤器实例添加到 filters 数组里面，最后执行 ticker 在 step 方法里会连续不断的执行， 通过不停改变 x 轴坐标，来实现纹理偏移水体扭曲的效果。展开评论点赞 - #青训营笔记创作活动#
2月18日 打卡day35
我们这里核心的就是借助了 linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent) 这个渐变背景，实现一个从透明到渐变色到透明的渐变背景，配合了 background-clip: text。
再利用动画，控制背景的 background-position，这样一个文字渐现再渐隐的文字动画就实现了展开评论点赞 - #青训营笔记创作活动#
2月17 打卡day34
主要思路：生成一个 canvas 元素，让 canvas 元素与需要划词高亮功能的文本容器元素等宽高，并且重叠在文本容器上，划词的时候获取划词区域的文本节点相对于文本容器的位置信息，然后通过这些位置信息进行高亮背景的渲染。
虽然思路看起来很简单，但是具体实现的过程还是有许多注意点的，接下来我就总结一下一些实现过程中的注意点和细节。展开评论点赞 - #青训营笔记创作活动#
2月16 打卡day34
今日学习vue的小用法
这个例子，文本内容使用的是随机数，所以数据对不上不必太在意。另外，既然index的值不固定，不能作为key，那么扩展一下，可不可以使用随机数作为key呢？答案自然是不能够。因为key值无论是删除还是反转，根本就不能找到相同的key，diff算法就毫无意义了，压根没有复用性可言。
在这个demo3里，数据源放了list这个数据，可言尝试循环它，来对比index作为key的结果，将会更加明显哦。展开评论点赞 - #青训营笔记创作活动#
2月15日 打卡day33
表格内容自适应屏幕宽高，溢出内容表格内部滚动（flex 布局）
表格搜索、重置、分页查询 Hooks 封装 （页面使用不会存在任何搜索、重置、分页查询逻辑）
表格数据操作 Hooks 封装 （单条数据删除、批量删除、重置密码、状态切换等操作）
表格数据多选 Hooks 封装 （支持现跨页勾选数据）
表格数据导入组件、导出 Hooks 封装
表格搜索区域使用 Grid 布局重构，支持自定义响应式配置
表格分页组件封装（Pagination）
表格数据刷新、列显隐、列排序、搜索区域显隐设置
表格数据打印功能（可勾选行数据、隐藏列打印）
表格配置支持多级 prop（示例 ==> prop: user.detail.name）
单元格内容格式化、tag 标签显示（有字典 enum 会根据字典 enum 自动格式化）
支持多级表头、表头内容自定义渲染（支持作用域插槽、tsx 语法、h 函数）
支持单元格内容自定义渲染（支持作用域插槽、tsx 语法、h 函数）
配合 TreeFilter、SelectFilter 组件使用更佳（项目中有使用示例）展开评论点赞 - #青训营笔记创作活动#
2月14日 打卡day31
今日学习图片预览功能实现
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置 matrix 来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。展开评论点赞 - #青训营笔记创作活动#
2月13日打卡day30
今日学习沙盒
总结一下，qiankun 一共有 3 种沙箱：
SnapshotSandbox：记录 window 对象，每次 unmount 都要和微应用的环境进行 Diff
LegacySandbox：在微应用修改 window.xxx 时直接记录 Diff，将其用于环境恢复
ProxySandbox：为每个微应用分配一个 fakeWindow，当微应用操作 window 时，其实是在 fakeWindow 上操作
要和这些沙箱结合起来使用，qiankun 会把要执行的 JS 包裹在立即执行函数中，通过绑定上下文和传参的方式来改变 this 和 window 的值，让它们指向 window.proxy 沙箱对象，最后再用 eval 来执行这个函数。展开评论点赞 - #青训营笔记创作活动#
2月12日 打卡day29
今日学习
package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。
package.json 里面有许许多多的配置，与项目息息相关，了解它们有助于了解项目，提效开发，规范代码。
今天主要介绍一些常见配置，我把它们分为了 7 大类：
描述配置
文件配置
脚本配置
依赖配置
发布配置
系统配置
第三方配置展开评论点赞