摘要：
前情 uni-app是我很喜欢的跨平台框架，它能开发小程序，H5,APP(安卓/iOS),对前端开发很友好，自带的IDE让开发体验也很棒，公司项目就是主推uni-app。 坑位 最近在做一个input字数限制的需求，用v-model+watch实现字数限制的时候发现双向绑定效果失效了。 Why? 猜 阅读全文
摘要：
前情 一直以来都没有好的方式可以监听元素变化，Mutation events虽然可以监听DOM树结构变化，但是因性能问题和差的兼容问题（Webkit内核不支持）并不推荐使用。 MutationObserver介绍 MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的 阅读全文
摘要：
前情 公司有个桌面端项目是基于Electron开发的。 坑 构建打包好的项目在桌面和任务栏上图标显示正常，但是在任务栏弹框上左上角的图标确不显示 Why? 经过反复搜索，网上有文章说如果ico图标过大会导致这类问题，于是看了下我项目中ico图标大小，吓一跳，竟然有210K，而源png只有20K 解决 阅读全文
摘要：
前情 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，在项目中我们就使用了它，非常nice 坑位 在使用Element组件的时候，一切都十分顺利，但是在使用弹框类组件Popover 的时候，发现并没有效果。 Why? 通过控制台查看元素后发现，其实Popov 阅读全文
摘要：
前情 最近要新开一个项目，技术栈由自己安排，于是就想到使用vue3+vite来做，体验一把新技术栈 坑位 vite开发体验极佳，但是在项目完成的时候，想通过本地服务提前发给产品确认UI、交互等细节的时候，发现通过本机IP无法访问当前开发服务，但是localhost是可以访问的 Why? 使用vite 阅读全文
摘要：
前情 在前端开发需求中，特别网页有视频需求时，需要做视频全屏功能，或者在某些可视化大屏项目也要做全屏。 Fullscreen介绍 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用 调用方式： /** * 指定元 阅读全文
摘要：
前情 在前端开发需求中，为了方便用户使用，经常需要通过点击按钮复制指定的某一段内容。 相关API Document.createRange() 返回一个Renge对象，通过Range对象可以选中文本。 // 选中id为test的元素的内容 const range = document.createR 阅读全文
摘要：
前情 在前端开发需求中，经常需要获取元素的尺寸位置相关的属性，以往的做法是调用不同api获取相关属性的。 getBoundingClientRect介绍 getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。 标准盒子模型：元素的尺寸等于width/height + 阅读全文
摘要：
前情 在前端开发需求中，经常需要用到锚点功能，以往都是获取元素在滚动容器中的位置再设置scrollTop来实现的。 scrollIntoView介绍 scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域 调用方式： var element = document.getElem 阅读全文
摘要：
前情 最近在做需求开发时候，需要监听表单的input事件 坑位 当通过JS动态修改表单的值的发现并不会触发表单的input事件 Why? 个人猜测是浏览器默认行为，input只会针对用户手动输入做响应 解决方案 方式1 在JS动态修改表单域值的时候，可以手动触发一下表单input事件 <!DOCTY 阅读全文