原创 Three.js之繪製物體的邊框及修改lineWidth

本博文主要記錄如何使用three.js繪製物體的邊框及修改其lineWidth。three.js是個技術點比較多,查詢資料又比較少的框架,單單就這個修改lineWidth就是一個坑。先放一個動態的效果圖,需要的小夥伴可以看下相關實現。 開

原创 Three.js之常用方法集錦(修改顏色,修改寬高,旋轉角度等)

本文主要記錄使用Three.js過程中使用的常用方法: 1. 修改顏色 setStyle 找到物體對應的material,調用方法: material.color.setStyle('#ca14cb'); // 設置成紫色,支持css顏色值

原创 基於Threejs的3D繪圖入門之基礎篇【轉】(一)

最近接手了一位離職同事做的項目,涉及到3D繪圖,他走之前進行了一些調研。本文及後續的博文,主要針對基礎知識及項目迭代優化過程中遇到的問題進行記錄。本文屬於基礎概念篇,該篇文檔源於我的同事調研結果,轉載記錄用於日後查閱。 一、3D基本要素 1

原创 CSS overflow-wrap新屬性值anywhere

在項目中遇到這樣一個問題,如下圖所示,當輸入純數字的時候,文本沒有按我們預想的樣子去換行,使用了 overflow-wrap: break-word後沒啥用,查了一下,需要使用overflow-wrap: anywhere; 記錄 a

原创 正則表達式功能集錦

1、縱向模糊匹配 正則: /[abc]/ 匹配:表示字符可以是字符中a,b,c的任何一個 正則:/[0-9a-zA-Z]/ 匹配:數字或者字母 2、排除字符 正則:[^abc] 匹配:除a,b,c之外的任一字符 正則:/^[^\d]

原创 簡潔大方的sync 和 update

場景描述 我們經常使用 prop 和 emit 的組合來實現父子之間的通信,如果簡單的場景下想父子組件相互修改,可以使用.sync 和 update組合。 代碼案例 父組件 傳遞 prop <comp :foo.sync="bar"></c

原创 我還不知道的一個方法 scrollintoview

案例場景 如下圖所示,點擊保存的時候,想把沒有標註到頁碼的圖片滾動到可視區域。 當我還在考慮計算標註圖片距離父容器的高度,然後設置容器的scrollTop的時候,旁邊的大神嗤之以鼻的說,你爲什麼不用scrollintoview? 什麼是s

原创 快速插入文本並恢復光標的方法execCommand

場景描述 一個可編輯的div,在輸入文本後,需要進行一些交互插入文本如右鍵插入,插入文本後需要恢復光標。 使用execCommand命令插入文本 一般情況下,我們會使用selection獲取光標的位置後,插入文本或者html然後再恢復光標。

原创 Vscode使用git插件提交代碼

平時習慣使用命令行提交代碼,但是會發現有時候比較繁瑣且當我們只要提交某個或某些文件的時候,還要輸入文件對應的路徑纔行,有點麻煩,使用Vscode的git插件會更便捷,提高平時的效率。這裏記錄下常用的操作。 1 查看更新 一旦有代碼更新,這裏

原创 找出不含有重複字符的最長子串的長度的方法記錄

題目 給定一個字符串 s ,請你找出其中不含有重複字符的 最長子串 的長度。 輸入: s = "abcabcbb" 輸出: 3 解釋: 因爲無重複字符的最長子串是 "abc",所以其長度爲 3。 輸入: s = "pwwkew" 輸出:

原创 cke編輯器插入&ZeroWidthSpace佔位字符的問題記錄

背景 本博文主要記錄在使用cke編輯器時,遇到的一系列的問題 問題1:在執行某些業務操作後,編輯器會偶現在頁面頭部或者尾部插入&ZeroWidthSpace佔位符(編輯器好像就愛幹這事~) 解決方法:在業務操作後對html的孩子節點進行遍

原创 vue項目-各類卡頓問題記錄

1、慎重修改prop傳來的對象數據 父子組件,是通過prop組件來實現通信的。如果是個基礎類型,在子組件修改了prop的值,vue會報錯。但是如果是引用類型,不會報錯,甚至還給你修改了。當我們使用父組件傳來的prop對象來構建視圖,並有修改

原创 iview checkbox 視圖更新無效問題

問題描述 數據是一個數組對象,對象中的check表示複選框的選中情況,複選框change事件需要做一些操作,我們習慣性的使用下面的模板方式: <Checkbox :ref="`checkbox${index}`" v-model="item

原创 老vue項目webpack3升級到webpack5全過程記錄(一)

背景 19年新建的vue項目,使用的是webpack3,隨着項目的積累,組件的增多導致本地構建,線上打包等操作速度極慢,非常影響開發效率和部署效率,基於此問題,本次對webpack及相關插件進行了優化和升級。本博文分爲2篇,第 1 篇 會直

原创 老vue項目webpack3升級到webpack5全過程記錄(二)

本文接上篇博客記錄一些配置的升級過程中遇到的坑。 1、設置mode 通過指定mode參數,啓用對應環境下webpack內置的優化。有三個可選參數:development,production,none。默認值爲production,生產環境