博客 / 列表

smallStone - vue項目eslint報錯Parsing error: inferred tsconfigRootDir .解決辦法

vue項目eslint報錯Parsing error: inferred tsconfigRootDir should be a resolved absolute path, but received: "xxxx".解決辦法 找到eslint.config.ts文件寫入 import { globalIgnores } from 'eslint/config' import { defi

eslint

smallStone - canvas實現一個部分滾動,特殊圖表

餅圖直接用echarts,但下面的只能自己實現了。 !DOCTYPE html html lang="zh-cn" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titlecanvasLine/title /head style

canvas , 前端

smallStone - 實現八方位判斷滑動方向和速度檢測

八方位判斷滑動方向,用判斷用户鼠標或者觸摸屏方位和滑動速度。 實用場景為:平滑滾動時候判斷方位及漂移位置。 !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0"

Javascript

smallStone - 無界微前端環境不能加載svg,導致圖標丟失問題解決

在無界微前端環境下,svg圖標偶爾會加載不到。或者説是第一次能加載, 後面再打開同樣得頁面就加載不到了。這種問題我們通過plugins來解決! { plugins: [{ // element 為真正插入的元素,iframeWindow 為子應用的 window, rawElement為原始插入元素 appendOrInsertElementHook(element

微前端

smallStone - V8引擎編譯js原理

網絡請求》scriptText》Parser轉義》AST》Ignition編譯》ByteCode字節碼》提取循環執行》優化編譯器 執行js代碼 解析源碼並轉成抽象語法樹(AST) 基於AST,Ignition解釋器產出字節碼 同時運行代碼並收集類型反饋 引擎檢測到常用行為(循環)發生,以及使用的數據類型,為了更高效,字節碼可以反饋數據一起被髮送到優化編譯器。優化編譯器會經過假設實現高

javascript專題系列

smallStone - 使用svg動畫實現數據流動畫圖

在工作日常中難免會遇到一些大屏項目,對於中台類型產品,少不了數據流通顯示環節。 今天就給大家講解一種實現數據流通圖的寫法。 等不及的小夥伴直接翻到最底部,把html代碼拷貝出來,粘貼到你的html內就能看到效果。 需求: 實現下圖所示: 分析: 拿到設計稿後我們首先要做的是分析此圖該用哪種技術實現? 第一步:應該使用定位實現圖中的文本和靜態元素 第二步:難點分析

HTML , svg動畫

smallStone - 微前端下element-ui等前端UI框架彈框偏移問題解決

本章1~6主要是解決無界微前端環境下element-ui彈框偏移問題,如果你用的是其他微前端框架,且提供了jsloader這種預處理器,則可以舉一反三解決同樣的問題。 7後面的內容可以通用react、vue、anglar,大家都可以嘗試嘗試,建議先用插件形式試試看,因為插件可以解決所有UI框架的偏移問題 如果不想看我廢話,請直接移步到5看代碼和後面的效果圖【此方法已經廢棄,因為官網更新了源碼。現在

微前端 , element-ui

smallStone - 使用flex佈局解決經典佈局中overflow必須設置高度才能滾動問題

本文旨在解決經典佈局方案中,左側/頂部/麪包屑/菜單欄收縮,主頁面無法跟隨變化,右側內容界面需要設置高度才能滾動問題。(主頁面內容全自動) 如下圖: 若要實現下圖所示,我們都會使用 “定位” 方式實現。當頂部高度變化,就需要我們調整內容高度。左側欄變化就需要調整右側寬度等。 如今: 我們可以使用flex方法實現這種佈局方案,且無需使用定位方式,所有佈局都是一邊調整,另一邊跟着一起變動,無需通過任

css3 , css技巧 , HTML