原创 vue+ts項目出現types\express-serve-static-core\index.d.ts報錯處理

如果出現types\express-serve-static-core\index.d.ts 的錯誤可以固定TS版本 cnpm install [email protected] cnpm install -D @types/express-

原创 劃詞標註或打標籤的實現方案

我們有很多業務場景需要對文字打標籤,有的直接劃詞,有的需要打標籤,比如下面的動圖展示。對實現思路做個總結 保存數據展示 start 起始位置(包含) end 結束位置(不包含) label 打的標籤 text 劃選的爲本 實現思路:基

原创 vue 常用組件可追尋(2023持續更新)

Vue drag resize - 輕量級,無依賴,可縮放 拖拽組件: https://juejin.cn/post/6844903713430061063

原创 canvas處理切圖並旋轉圖片

場景描述 需要把大圖中的框的圖片給顯示出來~類似下圖 如果將圖片倒置,則顯示對應倒置的圖片~類似下圖 代碼實現 let base64Canvas = document.createElement('canvas'); let base6

原创 Vue項目部署上線清理瀏覽器緩存

場景描述 爲什麼前端部署後會有緩存呢?原因有以下幾種: index.html由於是在打包的時候處在public文件夾下,所以他的文件是不變得。所以會有緩存存在 js,以及css文件採用默認的打包機制,只是文件增加hash值,在某種情況下會

原创 iview表格expand的使用方法

實現樣式 實現方法 table <Table ref="table" :columns="cloumns" :data="data" @on-selection-change="se

原创 vue3.0新特性歸納記錄

背景 關於vue3.0已經出來很久了,但是一直沒有嚐鮮,最近時間充裕一點,就開始梳理下相關新特性,也當作是一個學習歷程。 1. globalProperties 公共變量或者方法得定義 // main.js const app = cre

原创 使用echarts折線圖拖拽點及加點功能實現

最近在實現一個需求,需要改造echarts的折線圖,在其基礎上實現點的拖拽及點擊操作,效果如下: 實現方案 拖拽點 這個方法網上有說,原理:就是在折線的點位置上新增對應的拖拽點,並把拖拽點覆蓋在原點上面,設置其visible爲false,

原创 vuecli3.0搭建vue項目全過程

最近新寫一個項目,記錄下新建項目過程及坑處理。供新人查看~ 1 搭建腳手架 cnpm install @vue/cli -g vue create test 2 加入eslint 在package.json中加入rules,具體的ru

原创 HTML之拖放操作draggable

最近接到一拖拽交互操作,開始的時候就想着傳統的mouseUp,mouseDown,mouseMove之類的方法。但是偶然看到H5的draggable屬性,覺得更香啊!先看下實現的效果。 如圖所示的場景就很適合使用該API,拖拽的過程中鼠標

原创 玩轉SVG之線性轉換

3月在部門組織了一場關於SVG的培訓,把沒有分享到博客的資料放到博文上吧,因爲PPT寫過了,就截圖放上了,比較懶,懶得再打字了,嘿嘿~ 1. 線性變換屬性 2. dom轉SVG的座標點 核心代碼 document.addE

原创 這個批量引入組件的方法,挺酷

我們在寫vue組件的時候,如果在一個組件裏引入多個組件,一般的寫法是這樣的 完全沒毛病,但是這樣的寫法就有點累贅,每次新增一個組件又要添加多處,原來現在已經有更方便的寫法了,實踐了一下,非常nice const routes = {};

原创 Three.js之繪製中文文字並跟隨物體

本週更新的需求是物體上顯示文字信息,效果圖如下: 加載字體 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'; const loader =

原创 transform中的scale跟translate組合使用問題【轉】

在項目中使用scale的時候遇到一個場景:需要對一個指定的元素進行縮放,但同時又要保持其的相對的位置不變,這個時候就需要使用到CSS中的scale跟translate了。 比如,我有一個300*400的元素(並且該元素不支持使用width跟

原创 Three.js之根據頂點信息繪製立方體並給面設置顏色

使用Three.js繪製立方體是最基本的功能,我們可以使用new THREE.BoxGeometry(width, height, depth)根據長、寬、高等信息直接繪製,也可以根據點的信息進行繪製。而根據點的信息進行繪製這個功能,由於T