CSS实现曲线导航菜单 <W11>
最近看到一个这样的效果，挺有意思的，打算自己动手试一试。 拆解首先，看到这个缺口，心里想，这玩意要怎么弄，一头雾水。不过，对于这种形状怪异的，大多数都可以通过多个图形组合做出来，对于这个，可以拆成由下面三部分组成。 ↓ ↓ ↓ 对于左右两边的，可以通过圆角半径实现，重点是中间部分：缺口是个半圆的图形。在脑海里迅速头脑风暴一下，CSS 中可以实现一个圆形缺口有关的方案。 ...
JS中的类型转换 <W10>
JS 中的数据类型基础数据类型（又称为原始值）：null 、undefined 、boolean 、string 、number 。 声明时：用栈存储，栈中存放的是对应的值； 赋值时：生成一块相同值的栈，两个变量对应不同的地址。 动态数据类型：Array 、Object 、Set 、Map 等。 声明时：值存放在堆中，栈中存放指向堆的地址； 赋值时：将栈中的地址赋给另一个变量，也 ...
如何实现状态的「伪更新」? <W9>
最近要做一个与颜色选择器有关功能：当用户在颜色面板里预选颜色时，需要同时更新当前画布的颜色；如果取消选择，则将画布背景重置为初始颜色；如果确定了颜色，则更新当前画布颜色。比较容易想到的方法是，用两个变量分别记录初始值 originValue 与当前值 value ：如果只是选择，那就用去更新 value ；如果取消选择，重置为 originValue ；如果选中，将 originVa ...
Vue：beforeCreate -> created <W8>
如上图所示，Vue 在 beforeCreate -> created 阶段，按这个步骤进行初始化操作。按照这个顺序，也就意味着后者初始化的时候，可以使用前者已经初始化的变量。例如：在 data 中可以使用 methods 里定义的方法，也可以用 props 引入的属性进行初始化。 initInjectionsinject 的使用请参考官方文档。 先获取当前实例上注册的 i ...
v-resize：监听 DOM 尺寸变化
前两天一个同事遇到一个问题：从当前子应用再切换到另一个子应用，然后再切回来，当前子应用里 echarts 图表的宽度发生了变化，整体都变宽了一些，而且这个问题只有在测试环境下才有，线下开发环境一切正常。试了试，只要触发一次 echarts 自带的 resize 方法，就能将图表样式调整为正常样式了。于是就想到了，之前看过一个 UI 库出的指令 v-resize：当前 DOM 宽高发生 ...
ivu-input-number-union <W7>
最近朋友问我，多个数字输入框联动怎么做？他遇到一个需求，表格里的某一列是输入数字输入框，有多行，而最后一行是这些数字的总和。要达到的效果是，当输入框中的数字和超出总和时，清空所有输入框；如果未超出最大值，且还剩一个输入框未输入时，自动对最后一个输入框赋值。刚好前一段时间，做了一个下拉框联动的，两者的大体思路是相同的。首先是采用指令去实现，过程稍稍有点复杂，于是最后又实现了一个二次封装 ...
ivu-select-union <W6>
有这样一个场景，多个下拉框共用同一个下拉列表，如果有一个下拉框选中了某一项，那么该项不能被其他下拉框选中，也就是选中项不能重复。同时每个下拉框的下拉列表也是动态的，会根据已选中的值的变化而变化（看下图）。 方案一（外部实现）用一个「列表」记录当前所有下拉框已选中的值，每个下拉框的下拉列表都会根据已选中值和当前下拉框的值的变化而变化，前提是 Option 是采用 v-for 渲染 ...
v-set-title-attr <W5>
有个需求，下拉框里的选项分组后，因为组名可能会很长，于是就想添加一个文本超出时显示省略号的样式，这个用 CSS 就能做到，小意思。不过，如果文本超出后，我还想有一个能展示当前文字所有信息的提示。因为本身就是一个浮层了，再添加一个浮层就感觉很怪（说实话也不好加 😂），于是就想用原生的 title 实现（先看效果，如下图所示）。 思路首先可能会想到，把 OptionGroup 上 ...
一周年啦！
封面的图用的还是去年这个时候的必应每日一图，就当做是一种传承吧 🤭。 去年的这个时候，在我那小房间里研究怎么搭建博客，弄了一下午，晚上的时候才给搭好。转眼间，晃晃悠悠一年过去了，好快啊。回顾这一年，满打满算才写了 12 篇，差不多一个月一篇。今年有几个月都没写过，都是最近这两个月，开始坚持【每周一篇】系列，才给顶上来了，今后还要坚持 ✊。 想想去年的自己，偶尔上班还迟到 😂，下 ...
this、闭包和高阶函数 <W4>
这周没遇到什么比较有意思的地方，就拿这篇读书笔记凑数吧，写了也挺久的了，从 9.11 开始写，9.24 才结束，太能拖啦~ thisthis 的指向大致分为四种： 作为对象的方法调用当函数作为对象的方法调用时，this 指向该对象。 const obj = { name: "Tom", getName() { console.log(this.n ...