原创 vue+elementUI項目實現自定義校驗規則的傳參複用性
對於Vue+elementUI的項目而言，表單校驗的複用性是一個值得考慮的問題。雖然elementUI默認提供了一些表單校驗規則，比如required確定必填項，但是當面對更加複雜多變的實際業務需求時，往往顯得不夠用，因此就需要自
2020-06-27 17:24:46
6
原创 Vue集成tinymce富文本編輯器並實現本地化指南（2019.11.21最新）
tinymce是一款綜合口碑特別好、功能異常強大的富文本編輯器，在某些網站，甚至享有“宇宙最強富文本編輯器”的稱號。那麼，在Vue項目中如何集成呢？這並不困難，只需要參照官方教程即可。難點在於如何將默認的英文本地化爲中文。 本
2020-06-27 17:24:46
13
原创 原生JS中獲取位置的方案總結
獲取鼠標當前位置 clientY、clientX： 鼠標當前位置 相對於 瀏覽器可視區域頂部、瀏覽器可視區域左部 的位置； pageY、pageX： 鼠標當前位置 相對於 文檔頂部、文檔左部的位置； screenY、
2020-06-27 17:24:45
原创 webpack4.x下性能優化：利用dll（動態鏈接庫）優化打包速度、縮小打包文件體積
你會webpack性能優化嗎 即便我們已經學會了webpack的基本配置，這並不代表我們使用webpack搭建的項目沒有優化的空間，事實上，優化webpack項目是一門很深的學問。另一方面是，我們不必因爲感到webpack本身很難
2020-06-27 17:24:45
原创 vue項目妙用scss mixin實現樣式全編程式風格
方案介紹：優點 對於vue項目的樣式部分，有多種風格，這將取決於框架搭建人員的設計思路。本人在vue項目中以使用sass（scss）爲主，經探索，現研究出一種封裝方案，可以快速的進行樣式開發。這種方案的優點是： 極大節省樣式代
2020-06-27 17:24:45
2
原创 Element UI表格組件技巧：如何簡潔實現跨頁勾選、跨頁統計功能
業務場景 在使用Element UI的Table組件時，常常面對這樣的業務需求： 表格數據的每一項都要提供勾選框，當切換分頁時，能夠記憶所有頁面勾選的數據，以實現批量提交不同頁面勾選數據的功能。並且，表格下方實時統計已勾選數據的
2020-06-08 05:31:24
6
原创 JavaScript使用H5 FileReader和Image對象獲取本地圖片的分辨率
業務場景 試想這樣的應用場景： 當我們上傳本地圖片時，需要校驗圖片的分辨率，只有水平分辨率不大於1920、垂直分辨率不大於1080的圖片才允許上傳。 後端處理方案 顯然，我們是可以將分辨率校驗交給後端的，這樣的問題在於，後端校
2020-05-18 17:40:29
原创 vue圖片懶加載插件vue-lazyload監聽加載失敗事件的解決方案
對於vue項目而言，圖片懶加載是一個常見的圖片加載方案，可以優化用戶體驗，而vue-lazyload則是一個廣泛使用的插件。 對於某些業務場景，我們需要監聽圖片加載失敗事件，而後進行相應的處理，然而無論是官方文檔還是網絡上的解
2020-05-18 17:40:29
1
原创 axios封裝技巧合集：讓你的axios更好用的“七種武器”
axios如何封裝纔好用 前端項目中現已廣泛使用axios來進行ajax請求的處理，一個很重要的問題是： 如何對axios部分進行設計，才能使得接口調用簡潔，並且能夠應對各種複雜的情況。 就筆者參與維護的不少項目而言，axio
2020-04-16 22:35:55
1
原创 CSS開發技巧（五）：妙用padding實現元素的高度和寬度保持比例
1.情景再現 假使我們需要設置一張圖片的大小爲在1920分辨率下爲1920x480像素，在1440下爲1440x360像素，即圖片的寬高比例始終保持了1920 / 480 = 1440 / 360也就是 4:1的比例。那麼我們應
2020-03-01 14:00:32
3
原创 JavaScript實現冒泡排序
一、冒泡排序簡介： 假設有一個數組a，我們想象成有一個班級名叫a班，現在全班隨意排成一排，排頭的位置是a[0]，排尾的位置是a[a.length-1]。但高矮順序不是有序的，我們想從矮到高排，排頭最矮，排尾最高。 下面是一種方法：
2020-02-20 13:06:52
原创 JavaScript實現插入排序
一、插入排序簡介： 想象我們鬥地主，摸排階段，手裏的牌都按照從小到大排序。如果每摸一張牌，我們就把他插入合適的位置，使得它比後面位置的牌小，比前面位置的牌大或者相等。 類似這樣的一種排序方法就是插入排序： 在一個數組a中，我們要實
2020-02-20 13:06:52
原创 CSS開發技巧（四）：解決flex多行佈局的行間距異常、子元素高度拉伸問題
在使用flex佈局時，若出現換行，有兩種較爲特殊的現象是值得我們研究的： 子元素高度被拉伸，其實際高度大於它的內容高度。 各行子元素之間的行間距過大，甚至我們根本沒有給子元素設置margin。 現在我們將要探究引發這兩種現象的
2020-02-20 13:06:52
原创 JS實現元素的全屏、退出全屏功能
在實際開發中，我們很可能需要實現某一元素的全屏和退出全屏功能，如canvas。所幸的是，js提供了相關api用來處理這一問題，只需簡單的調用requestFullScreen、exitFullScreen即可。但這兩個api一般
2020-02-20 13:06:52
原创 微信瀏覽器中的全屏異常、應用切換異常問題探究
現象 在微信瀏覽器中，有兩種情況容易引發異常： 1、微信瀏覽器中某一個元素處於全屏時，這時微信出現彈窗； 2、微信瀏覽器某一個元素處於全屏時，切換到其他應用，微信後臺運行 一段時間再切回來； 這時我們的頁面將處於一個異常狀
2020-02-20 13:06:52