原创 CSP內容安全策略與vue-cli中轉化爲base64文件衝突解決方法

出現問題:後臺爲了防止XXS攻擊加入了CSP內容安全策略設置,導致vue-cli中通過url-loader處理爲base64的字體文件和圖片文件因爲違反規則而圖標不出現解決方法:(1)後臺處理以IIS爲例: <add name="Co

原创 Vue通過for循環隨機生成不同的顏色或隨機數

需求:隨機生成不同的如下圖標的背景顏色 方法:本來通過計算屬性渲染出隨機顏色,然而計算屬性是一次性獲取值,即使你把RandomColor引入v-for中也沒有用,得到的只會永遠是同一顏色,除非刷新頁面顏色才改變,但是還是沒法實現五顏六色

原创 Vue中使用Vuex對象展開運算符寫法“...”出錯

問題:解決:修改.labelrc文件配置{  "presets": ["es2015", "stage-2"],  "plugins": ["transform-runtime"],  "comments": false,}

原创 自定義基於elementui的仿QQ邀請成員進羣樹圖模糊搜索組件可實現默認選中部分選項,刪除選項,搜索展示子節點

需求:項目經理要求實現一個類似QQ成員系統管理的組件來進行成員系統權限的添加,可多選可查詢,本來想用elementui樹圖組件,但是elementui樹圖搜索父節點卻沒展示子節點,於是在之前改過elementui組件一波三折後直接自己上手

原创 echartGL中option各3D配置屬性配置詳解

最近,接手一個項目需要實現echart中各種3D圖表樣式,我還是一如既往的從研究echart配置項中各屬性含義開始入手,由於自己需要實現的是柱狀圖效果,類似地圖3D 效果在這裏不展示,直接進入自己所研究的內容1、grid3D希望上面的圖片

原创 安裝基於Vue-cli腳手架的Vue項目

安裝一個基於vue-cli腳手架的vue項目:(1)安裝淘寶鏡像$ npm install -g cnpm --registry=https://registry.npm.taobao.org(2)將vue-cli安裝在全局中cnpm i

原创 vue項目後臺給登錄頁面如何接入?一個接口+Vue-Router+Vuex簡簡單單實現登錄

有時候急着學更多新知識會把最基礎的遺忘,以前使用PHP那會還知道表單序列化,最近通過form獲取裏面所有name屬性對應的控件值卻把document.getElementById('表單Id').serializeArray()給遺忘了,

原创 echarts柱狀圖(柱條顏色漸變,多條數據顯示指定數據數)

(上一篇echarts餅圖與本頁例子代碼可在github(https://github.com/applebring/echarts-)上下載)--本打算與上一篇寫一塊,爲防止篇幅過長分開寫,echarts柱狀圖實現柱條漸變以及顯示柱條數

原创 高德地圖實現矩形圍欄繪製和編輯

需求:在地圖上實現圍欄繪製,並在圍欄區域顯示相應的數據,圍欄可編輯實現:在高德地圖上繪製圍欄:繪製圍欄和編輯圍欄使用高德自帶的插件AMap.PolyEditor,AMap.CircleEditor,AMap

原创 高德地圖實現對應車輛的軌跡回放與軌跡的清除重繪製(瀏覽器支持: PathSimplifier目前依賴Canvas進行繪製,因此不支持IE9及以下瀏覽器)

最近項目實踐中接觸高德地圖比較多,也發現高德地圖新增了一系列的UI組件庫,因此遇到一些新問題也只能自己琢磨。 頁面需求:查詢輸入框實現車輛的對應軌跡,在地圖上顯示相應的軌跡(此處,上一輛車的軌跡必須清除才能繪製下一輛車的運動軌跡) 自己寫

原创 將後臺返回數據去重並渲染到樹狀圖上

今天做項目時遇到了個樹狀圖渲染的問題,這邊要求最終實現效果如下,顯示所有企業所有的汽車車牌號:後臺返回的數據格式將每個企業對應的車輛分別爲一條一條數據,我當時的想法是讓後臺返回一個企業爲一個對象,該對象又包含着一個車輛數組對象,鑑於後臺同