原创 DOM元素高度獲取踩坑
前情 最近在開發一個需求，需要做一個滾動列表展示當前中獎用戶，但是列表每一項高度又不是固定的，每次滾動前需要先獲取當前要滾動的塊是多高才知道要滾動多少。 坑位 在開發這個滾動列表的時候發現滾着滾着就會出現滾動距離出現差距，慢慢的滾動距離不
2022-11-02 12:58:44
原创 Fiddler抓包iOS手機配置全流程
前情 平時做移動移動端開必的時候經常需要抓包手機，用於接口請求跟蹤，但iOS的抓包經常性的配不成功，經過踩過不少坑後終於知道了整個配置流程，此文記錄Fiddler抓包iOS手機的配置流程。 Step 1：Fiddler配置 通過工具欄Too
2022-10-29 12:58:35
原创 Vue組件樣式穿透
前情 Vue是目前主流的前端框架之一，我是Vue框架的忠實老用戶，平時開發中如果再依賴個第三方組件庫那樣開發效率就會事半功倍。 第三方組件庫可以很大提高開發效率，但是叫會有一些UI效果需要自定義，如想做一些微調更滿足項目需求的時候，你會發現
2022-10-26 12:58:40
原创 Uniapp input的maxlength問題
前情 uni-app是我很喜歡的跨平臺框架，它能開發小程序，H5,APP(安卓/iOS),對前端開發很友好，自帶的IDE讓開發體驗也很棒，公司項目就是主推uni-app。 坑位 最近在做一個input字數限制的需求，但是對於如果你輸入有em
2022-09-18 12:58:40
原创 Uniapp input的v-model問題
前情 uni-app是我很喜歡的跨平臺框架，它能開發小程序，H5,APP(安卓/iOS),對前端開發很友好，自帶的IDE讓開發體驗也很棒，公司項目就是主推uni-app。 坑位 最近在做一個input字數限制的需求，用v-model+wat
2022-09-16 12:58:37
原创 前端好用API之MutationObserver
前情 一直以來都沒有好的方式可以監聽元素變化，Mutation events雖然可以監聽DOM樹結構變化，但是因性能問題和差的兼容問題（Webkit內核不支持）並不推薦使用。 MutationObserver介紹 MutationObser
2022-08-16 12:58:47
原创 electron項目icon顯示異常
前情 公司有個桌面端項目是基於Electron開發的。 坑 構建打包好的項目在桌面和任務欄上圖標顯示正常，但是在任務欄彈框上左上角的圖標確不顯示 Why? 經過反覆搜索，網上有文章說如果ico圖標過大會導致這類問題，於是看了下我項目中
2022-08-13 12:58:36
原创 Element修改彈窗類組件的層級
前情 Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫，在項目中我們就使用了它，非常nice 坑位 在使用Element組件的時候，一切都十分順利，但是在使用彈框類組件Popover 的時候，發現並沒
2022-04-19 12:58:44
原创 Vite項目無法通過IP+端口的方式訪問開發服務
前情 最近要新開一個項目，技術棧由自己安排，於是就想到使用vue3+vite來做，體驗一把新技術棧 坑位 vite開發體驗極佳，但是在項目完成的時候，想通過本地服務提前發給產品確認UI、交互等細節的時候，發現通過本機IP無法訪問當前開發服務
2022-04-15 12:58:52
1
原创 前端好用API之Fullscreen
前情 在前端開發需求中，特別網頁有視頻需求時，需要做視頻全屏功能，或者在某些可視化大屏項目也要做全屏。 Fullscreen介紹 讓你可以簡單地控制瀏覽器，使得一個元素與其子元素，如果存在的話，可以佔據整個屏幕，並在此期間，從屏幕上隱藏所有
2022-03-24 12:58:44
2
原创 前端好用API之getBoundingClientRect
前情 在前端開發需求中，經常需要獲取元素的尺寸位置相關的屬性，以往的做法是調用不同api獲取相關屬性的。 getBoundingClientRect介紹 getBoundingClientRect()方法返回元素的大小及其相對於視口的位置。
2022-03-08 12:58:34
原创 前端好用API之scrollIntoView
前情 在前端開發需求中，經常需要用到錨點功能，以往都是獲取元素在滾動容器中的位置再設置scrollTop來實現的。 scrollIntoView介紹 scrollIntoView()方法將調用它的元素滾動到瀏覽器窗口的可見區域 調用方式：
2022-03-03 12:58:39
原创 js修改表單值不會觸發input事件
前情 最近在做需求開發時候，需要監聽表單的input事件 坑位 當通過JS動態修改表單的值的發現並不會觸發表單的input事件 Why? 個人猜測是瀏覽器默認行爲，input只會針對用戶手動輸入做響應 解決方案 在JS動態修改表單域值的時候
2022-02-26 12:59:04
原创 Flex 彈性佈局備忘錄
概述 Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性 這也是我目前用的最多的一種佈局方案，相比Grid佈局此種佈局方案相對較簡單，容易掌握性。而且兼容性也好過Grid 基本概念 容器和項目
2022-02-01 12:58:32
原创 Less使用備忘錄
定義 Less （Leaner Style Sheets 的縮寫） 是一門向後兼容的 CSS 擴展語言，動態樣式語言。 使用方式 直接引入less.js文件 好處：能獲取客戶端的數據，從而進行進一步的計算 壞處：在客戶端解析Less,造成性
2022-01-30 12:58:34