CSS实现毛玻璃效果的一种新方式

今天在逛V站看到一个自推UI组件库的帖子,我觉得很不错,在查看组件样例的时候呢,发现了他的抽屉组件的遮罩可以把整个页面添加毛玻璃效果!我就很惊讶。马上就 F12查看了一下他的实现方式,因为在我映像里还没有一个很简单的的可以直接实现背景元素毛玻璃效果的方式。

其实不光是抽屉组件,其它的一些类 Modal 带有遮罩的组件都有这个毛玻璃的效果,大伙可以点点看看。

好了,不多废话直接开始正题。

阅读全文

使用Alt+Tab切换窗口时会显示Edge打开的所有页签

自从入职新公司之后默认浏览器是 Edge 一直都没有切换,发现一个事情就是每次使用 Alt+Tab 切换应用的时候总是会把当前 Edge 打开的网页都展示出来,就很麻烦。
明明我应用内使用 Ctrl+Tab/Ctrl+Shift+Tab 就可以前后切换页签。不知道为啥就要把单个页签也当成一个应用来展示,所以就想关闭这个功能。

一开始想当然的从 Edge 的设置内,但是找了一圈没有找到。就去问度娘了,发现是要从系统设置里去修改的。
操作步骤为:

  • 在桌面右键后选择 显示设置
  • 然后在侧边栏找到 多任务处理 选项
  • 按Alt + Tab将显示 项修改成 仅打开的窗口 即可。
阅读全文

HTML API + CSS 控制页面打印内容和样式

本周来了一个新的需求,需要前端生成打印内容,每一项数据占据一张 A4 纸,选择多项就是分多张打印,所以需要打印指定内容区域,并且使用 page-break 来控制打印区域的分页。
以前就只使用 CSS 控制过打印时样式,隐藏一些不需要打印的区域,还尝没有试过打印指定区域内容,并且控制打印内容强制分页,所以记录一下。

阅读全文

迁移到NVS(NodeVersionSwitcher)来管理NodeJS版本

最近工作在有信息管控的厂内,配发的电脑是受限用户账户,使用 NVM for Windows 来切换版本的话,会有访问被拒绝的情况,需要使用管理员权限来切换。这在日常工作中会是一件十分麻烦的事情,每次切换版本都需要去找IT Admin授权。

之前刚入职配置开发环境的时候就遇到过使用 NVM4W 切换版本的时候会出现访问被拒绝的问题(提示 exit status 1: Access is denied.),需要管理员权限才可以切换,只不过现在负责的都是新项目不需要切换 NodeJS 的版本,所以当时指定完当前 Node 版本为 LTS 之后就放弃纠结了。

昨天小伙伴也遇到了需要切换版本的情况,我也因为时间间隔太久了就和他说可以使用NVM4W来切换,他尝试之后发现并不行。

正好我手头上也忙完了大部分工作内容就研究了一下如果来解决这个情况。在浏览 NVM4W 的 Discussions 时,看到了 一篇帖子,其中有人提到了 NVS,所以在V2EX提问之后就去了解了一下,以下步骤皆为 Win10 环境下,Mac 及 Linux 可以查看仓库的 README

阅读全文

AntD of Vue 中 <AForm> 表单域组件化使用的尝试

最近有一个项目,我发现有一些表单内容高度重复的情况,几张页面的表单虽有些细微差,但还是有很多同样的表单内容,或者 表单域A表单域B 同时出现在一个页面中的这种情况。

我就想着能不能把他们都提出来,单独的做成组件在再使用到这些内容的时直接引入对应的表单域组件,并且可以把下拉菜单的远程查询也放到组件中,这样就会精简点很多重复的代码。

阅读全文

JS中的数字格式化和大位数缩写

以前因为项目需要 i18n ,一直以来都是自己写了一个格式化函数来处理,会使用 replace 配合正则对数字进行千位分割来展示,并且搭配 Vue.filter 来实现快速格式化。
但是对于大位数处理就会比较麻烦了,因为在境内就需要使用 万位分割,大位数使用 万、亿、万亿 来缩,而在英语系国家就会使用 千分分隔,比如说: K、M、B 来缩写数额。

正巧最近开始了一个需要国际化的项目,在一开始编写数字格式化过滤器的时候偶尔发现了 Intl.NumberFormat().format() 这个API,原来现在 原生JS就支持了对数字的格式化,并且不光可以千位分隔,还可以将大位数缩写。

阅读全文

记录在 uni-app 中使用 uViewUI 的图标组件使用 @click.stop 拦截冒泡事件报错

嗨呀,我也开始写 uni-app 了 😂,这次在使用 uView 这个UI库的时候遇到了一个问题,就是 <u-icon> 组件使用 @click.stop 阻止冒泡事件使会提示异常:TypeError: e.stopPropagation is not a function

去看了一下组件的源码,发现 u-icon 组件的 click 事件是自定义事件,没有 event,只返回了一个 this.index,所以不能使用 .stop 来阻止冒泡,

阅读全文

JS中的字符串前后补全(补位)

在日常项目中经常会遇到需要对字符串补位的操作,比如

  • 向前补0:例如日期,经常会需要YYYY-MM-DD 的格式,
    如果不使用日期库,直接获取月份和日期前面是没有0的,需要手动拼接字符串。

正巧今天要搞日历组件,前面缺一个0总感觉少了点感觉,当时懒得自己写补全了,想着百度一个吧,就搜到了张鑫旭大佬的这篇文章 《JS字符串补全方法padStart()和padEnd()简介》,然后就惊了,原来早在4年前 JS 就原生支持了前后补全了(我这几年在干嘛😢)

阅读全文

数组的 .map() 和 .forEach() 是否会修改原数组

面试的时候也算是进场会遇到的一个题目了,结论就是 可以也不可以,看原始数据是什么结构的,也看你如何是操作的。

如果说数组元素是基本类型的,比如说是数字类型、字符串、布尔类型的,那么不管是用 .map() 还是 .forEach() 都是无法修改原数组的。
如果说是集合类型的,比如说数组、对象,那么直接操作内部的元素或者属性都是会修改原数组的。

阅读全文

总是记不清的重排/回流(reflow)和重绘(repaint)

重排会导致重绘,重绘不会导致重排 。

中文环境下面的 重排 会有另外一种称呼方式叫做 回流。以前一直不理解为什么重排叫回流(直译的 reflow),导致我在记忆的过程中我总是会把他们混在一起,分不清回流是重排还是重绘。

他们对应的含义我倒是分的还是比较清楚的。简单来说就是,牵扯页面布局的页面更新是重排,重绘就只是一些不影响布局的样式更新……

阅读全文