原创 js使用正則match方法對字符串進行精確提取
前言：最近用到了js正則的match方法雖然很簡單但是還是發個文章吧證明我還在，哈哈 業務場景：比如給我們一個字符串讓我們提取中間指定的內容，突然一聽很是頭疼，然後再仔細一想還是挺簡單的，比如indexOf方法，我們可以用indexOf先
2023-03-05 06:02:31
原创 使用qrcode-decoder讀取頁面上的二維碼信息
前言：有時候頁面上會生成一些二維碼信息然後對其進行識別並讀取二維碼裏面的內容然後做一些相應的處理，今天來介紹下插件qrcode-decoder的使用，這個插件可以說可以很輕鬆的實現我們的需求，接下來我們來看下這個插件 官網地址 方式一 Us
2022-12-28 20:01:08
原创 在vue或者react裏面直接將本地視頻文件作爲資源在網頁上播放
前言：看了好多播放器比如西瓜播放器-xgplayer，video.js, video-react, react-player等都是直接一個屬性url將視頻的url傳遞給插件進行播放，幾乎沒有看到可以把源視頻文件作爲值進行播放的插件，如果需要
2022-11-23 03:00:36
原创 React + umi引用xlsx或者mp4文件提示需要安裝loader
前言：當我們在項目中直接使用文件（xlsx｜pdf｜word｜mp4）會提示需要加載loader該如何處理，老項目可能沒有內置file的處理插件需要我們手動做如下處理，如果是一些新啓的項目一般不會遇到這種問題 解決方案： npm in
2022-11-23 03:00:36
原创 React + umi(使用umi內部組件SelectLang)實現多語言
前言：衆所周知項目國際化首先會想到的是有英文，其次就是我們開發者所在地的語言比如我們的中文，那麼如果想要添加一個其他國家的語言該怎麼辦？還是第一次接觸添加其他國家的語言，直接想法是一個下拉框裏面添加你想要的國家然後根據下拉的value值進行
2022-11-19 14:04:31
1
原创 解決React使用qrcode.react生成二維碼添加logo之後掃描不出來
前言：使用qrcode.react之後並且添加了公司的logo通過手機掃描無法每次都成功識別二維碼，原因分析爲logo與整個二維碼佔比過大導致無法識別出該二維碼。先介紹使用方法 1. 安裝依賴 npm install qrcode.reac
2022-11-08 07:13:36
原创 react+ant.design Form表單校驗失敗自動滾動到第一個校驗不通過的表單位置
1. 一定要在Form標籤上添加scrollToFirstError屬性，觸發要使用Button上面的htmlType="submit"方可。注意：Button要在Form標籤內部包裹 <Form form={form} scrol
2022-11-08 07:13:26
原创 淺談vue使用vuex
前言：對於只是維護vue項目的我接觸到了vuex，看完之後我對vuex的印象和redux的使用方法差不多，下面我們來說一下關於vuex的具體使用 1.vuex文件定義（通常放在根目錄store文件夾modules文件夾下），文件內部格式爲
2022-11-08 07:13:26
原创 使用js將rgb顏色轉換爲HEX（十六進制顏色）或者將十六進制顏色（HEX）轉化爲rgb顏色
hex和rgb異同 hex的格式：#rrggbb rgb的格式：reb(255,255,255)可以添加第四個參數用來調整透明度 10用a表示，11用b表示，12用c表示，13用d表示，14用e表示，15用f表示。（也可以用大寫字母表示，這
2022-11-08 07:13:26
原创 前端知識記錄更新
另使用語雀總結在前端道路上遇到的問題和知識點將以筆記的形式記錄，如果有需要的小夥伴可以訪問以下地址，謝謝大家 https://www.yuque.com/yanzihao-franz/mkc4kz
2022-11-08 07:13:26
原创 React、Vue使用js初始頁面將指定內容滑動到可見區域
比如說某一個頁面初始進入後需要將某一塊內容滑動到可見的區域，這塊區域比如說是 <div>我是一個元素，需要進入頁面後直接可以看到我，並且我的位置比較靠下已經超出了屏幕的高度</div> 具體實現 將div上面加一個id比如是box 如
2022-11-08 07:13:26
原创 React使用hook實現跨組件傳值
衆所周知使用props傳值是最簡單也是最有效的方式，但是當組件嵌套過深時就會把props的不便之處暴露出來，如果使用props就需要層層傳遞我們需要用到的參數。這樣就會顯得很繁瑣哪怕中間層沒有用到props仍需接收props用於給子組件繼續
2022-11-08 07:13:26
原创 移動端使用echarts繪製圖表使用tooltip無效果
前言：經常使用echarts的碼友們應該知道在PC端使用tooltip時是鼠標移入會有彈窗顯示信息的功能，但是在移動端無論怎麼樣都無法觸發彈窗顯示，經過多方面信息收集發現只有用echarts版本4以下的纔可以在移動端顯示tooltip的功能
2022-11-08 07:13:26
原创 Vue3 setup語法糖解析
setup說明 Vue3.0 在template中想要使用setup中的變量和函數必須return暴露變量出來，template中才可以使用； 缺陷就是會導致在頁面上變量會出現很多次，使頁面變得不整潔。 很不友好，vue3.2只需要在scr
2022-11-08 07:13:26
原创 使用sort對類似於1-1、2-1、1-1-1、2-2類型的數據進行排序
1. 創建模擬數據源然後對該數據進行排序 const unitList = [ { unitName: "1-1" }, { unitName: "1" }, { unitName: "1-3" }, {
2021-12-16 02:16:54