Vue中接收没有声明的Prop属性[null/undefined]的接收问题

最近在写基础组件,同事一直反馈说组件总是提示警告:

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Array, got Null

一开始以为是接收的问题,把定义的props加上了工厂函数后没有报异常就没再管了。
今天再去看的时候发现还是有报错,检查了一下组件代码没发现问题,在查看业务代码的时候发现同事喜欢给声明的变量默认赋值为 null。而不是声明正确的基础类型。所以我就想应该如何把这个问题彻底解决掉。

🔔 其实这个提示为了提醒可能你绑定的变量并不一定存在。

阅读全文

聊一个复用组件中使用debounce时遇到的问题

今天我中遇到了一个这样的场景,发现触发复用的自定义组件中添加了防抖的函数,发现只执行了一次,并没有如预期的那样每个组件内的函数都执行一次。

一开始以为是没有同步赋值,检查了一下没问题,才把关注点转移到 debounce 上面。移除防抖之后果然解决问题了,但防抖又不能去去掉。

所以查了一下相关的问题,发现是因为多个组件实例是共享同一个预置防抖的函数,并不是相互独立的。

阅读全文

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

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

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

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

阅读全文

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

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

阅读全文

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

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

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

阅读全文

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

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

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

阅读全文

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

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

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

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

阅读全文

Provide/Inject - 我在Vue中很少使用到的一种父子通讯方式

也算是经典面试题的一部分了,对于父子间的通讯很多时候的使用我都是限于 props/$emit 来处理,或者 Vuex/EventBus 这种方式,很少会用到 Provide/Inject 来处理。其实这是一个很实用的跨级组件间通讯的方式。

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。

看文档中关于这对API的解释就可以看到,向其所有后代 注入一个依赖,所以在跨级组件间通讯,或者 单父多子组件间通讯就会很方便了。

简单的使用可以查看官方文档中的示例,我就不举例了,因为使用起来真的很简单。

最直白的(但是错误的)可以理解为 props 的强化版本,暴露一个可以无视子组件的嵌套层级属性来进行注入。

阅读全文

如何判定一个变量是数组

一个不幸的消息,最近我厂因为资金的问题凉凉了,所以我得开始重新找工作了,最近应该会分享一些和面试题有关并且我觉得有意思的内容,
😁 正巧今天面试的时候被问到的一个面试题我觉得就挺有意思的题目:

你如何判断一个变量是数组?

因为得知公司要解散的消息后比较仓促,也就没有好好刷面试题直接就出去面了(无缝衔接实属渣男了),所以被问道这还算是比较经典面试题的时候,下意识就回答了使用 typeof 来判断,但是想起来不对啊,数组他是对象类型嘛!

😱 卧槽,踩坑里了。

就马上补充了一句:“emmmm….好像用 typeof 不行,数组返回的是 Object ,应该可以通过原型链上的 constructor 来判断….噢,通过 instanceof 也可以!”

不出意料因为踩坑了,紧接着面试官就追问了一句 “还有其它的方式吗?”
考虑了5秒左右答 “没有了,暂时想不起来更多的方式。”,面试官回:“还有一种 isArray 可以判断”

以前一直没有考虑过这种问题,去判断一个对象是否为数组的场景。所以我觉得就还蛮有意思的,所以回来之后想看看还有哪几种方式可以判断是否为数组。

阅读全文

微信小程序学习日记 L09 消息推送

项目新增了一个过期提醒的需求,需要增加定时推送消息的功能,查看文档了解到消息推送可以选择两种推送方式,一种是 小程序订阅消息,另一种是 服务号模板消息

最简单的肯定是小程序直接拉起订阅消息,不需要做很多的准备,在开放平台设置好订阅消息模板之后直接使用就可以了。

服务号订阅则会麻烦一些,需要从小程序跳转到公众号引导用户关注,然后绑定公众号的OpenID到账户上。

所以肯定是先尝试最简单的小程序订阅消息啦!

阅读全文