原创 手機號自動補空格
pc端通過keyup事件做處理：注意添加maxlength="13" <div class="m-input-wapper" id="m-input-wapper"> <input type="text" class="m-i
2020-06-21 08:03:27
原创 vant toast 關閉棧溢出問題
開發中有這樣一個常見場景。在發送某個異步請求以後，需要給出一個提示，提示停頓一定時間以後再路由跳轉至其他頁面。 vant的toast中有這樣一個方法：最初的寫法是這樣的： 而這也是才坑所在。然後你會看到： 死循環。棧溢出了。 解決的辦
2020-06-20 09:51:49
原创 vue 動態切換皮膚和主題 篇三
前面介紹了一種動態換膚的方法。主要是通過less-loader的less.modefyVar() 通過動態傳參。動態修改less變量達到目的。 今天我們將採用另外一種存css的方式實現這種效果： 首先我們需要了解下css新的特徵： var
2020-06-20 09:51:49
原创 vant 實現全選功能
今天遇到了一個問題。實現類似淘寶的購物車全選/全不選效果。記錄下這裏面的問題： 這裏面有這樣幾成邏輯：（我們把圖中的京東，網易，天貓等看成一個模塊） 1每一個單獨模塊有一個控制該模塊是否全選的按鈕，點擊全選/全不選切換，該模塊下的所有複
2020-06-20 08:46:18
原创 axios裏如何優雅的處理網絡超時
網絡超時的常見表現就是我們請求一個接口如果長時間得不到服務器的響應。就會出現網絡中斷，報錯提示網絡超時。 在前端項目中，我們一般通過axios的攔截器對後端的請求和響應進行統一處理。 網絡超時屬於返回異常的一種。因此我們需要在攔截器的re
2020-06-20 08:46:18
3
原创 關於在循環發請求中如何正確對應返回值問題
今天遇到了這樣一個需求。後端返給你一個數組。類似如下： let arr=[ {name:'one',dataUrl:'/api/one',age:20},
2020-06-20 08:46:18
原创 vue 定製主題與切換皮膚二篇
之前一篇文章介紹過如何通過less定製主題。今天我們將實現如何實現動態皮膚切換的第二種方法： 祕密武器就是less.modifyVars({l@color:'#fff'}) 其中@color就是全局定義的變量。後面就是你想要更改的值。其實
2020-06-20 08:46:18
原创 vue-masonry踩坑記錄
記錄幾個vue-masonry插件使用中的坑： 1 引入方法： 通過npm i vue-masonry以後，引入方法是 import {VueMasonryPlugin} from 'vue-masonry'; 我用的版本是0.11.8
2020-06-09 03:22:08
原创 html5 FileReader 實現本地圖片上傳並預覽應用實例
1、FileReader接口的方法 FileReader接口有4個方法，其中3個用來讀取文件，另一個用來中斷讀取。無論讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在result屬性中。 FileReader接口的方法 方法名
2020-06-04 09:57:29
原创 vue組件庫vant-ui和iview組件庫使用中遇到的問題小結
1 最近項目需要臨時做一個調查問卷頁面。考慮到性能和複雜度，決定通過使用cdn方式編寫該頁面。 效果如下： 移動端採用vant.ui 遇到的問題： （1） 通過cdn方式進行開發的時候，引入官網的鏈接。查看network會報302錯誤
2020-06-04 09:57:19
原创 reactHook實例之TodoList
上手reackHooks實現一個todolist 用到的hooks：useContext、useReducer、useState 項目結構： ----nav組件 頭部輸入框和點擊添加按鈕 -----conten
2020-05-02 14:28:20
1
原创 vue 實現頁面左右切換效果踩坑
提示：此坑在css中 實現效果：全局app不實現頁面左右切換動畫。只有某個板塊進入以後實現該效果 問題重現： 進入板塊以後首次進入會出現兩個頁面打攪的現象 代碼如下： 由於只是某一模塊採用動畫。所以採用了嵌套路由方式 ：以下home ，q
2020-04-25 21:19:50
原创 微信支付和h5支付詳解與示例
----------------------------------------------------------------------------------------------------------------------
2020-02-21 04:11:43
1
原创 syntax-dynamic-import插件實現懶加載
syntax-dynamic-import實現懶加載 1 npm install --save-dev @babel/plugin-syntax-dynamic-import 2 在根目錄新建一個babel.config.js文件 （注
2020-02-21 04:11:43