原创 CSS科技感四角邊框

實現效果:使用before和after就可以實現,代碼量不多,長度顏色都可以自己調整   實現代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

原创 CSS:頭部導航設置複雜背景圖片自適應顯示(與menu菜單貼合-自用)

場景:頭部導航是比較複雜的背景圖片,有時還需要和menu菜單位置貼合,同時需要自適應不同分辨率,實現結果如下: 1920 1366 2048 原始背景圖片如下: 代碼如下: .hearder-panel { po

原创 vue+elementUI+echarts使用過程中遇到的坑--個人總結(不定時更新)

最近在用vue,_(:3」∠)_腥風血雨啊,這裏總結一些學習使用過程中遇到的坑,因爲是學習中所以會一直更新總結 目前是webpack下開發   1、圖片的地址要用require(補充:當你的圖片資源放在src目錄下的話需要) navLi

原创 Vue-CLI3.0項目搭建過程系列一:項目創建及基本插件安裝

Vue-cli3官方:https://cli.vuejs.org/zh/guide/ 這個系列計劃從零開始搭建一個Vue-CLI3.0的項目,其中會包括實際項目目錄框架搭建、常用的插件安裝使用方法(還會詳細介紹vuex、axios、rou

原创 maptalks標註(mark)——動態圖標效果

最終效果圖如下: 1、下圖這種效果是用了官方提供的插件maptalks.animatemarker,地址https://github.com/maptalks/maptalks.animatemarker 2、這種是用了maptalks

原创 Ant Design of Vue 時間選擇器實現時分秒時間段選擇(disabledHours、disabledMinutes、disabledSeconds、禁用時間)

最終實現按效果如下:即實現時分秒時間段的選擇,結束時間要大於開始時間 使用了disabledHours、disabledMinutes、disabledSeconds來實現禁用時間 完整組件代碼如下:可直接引用運行查看效果 <temp

原创 Vue-CLI3.0項目搭建過程系列三:項目中router路由應用包括路由攔截

項目中我們使用router進行路由管理 router文件夾下創建index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) expor

原创 Vue+Element 用同一個el-dialog彈框完成新增和編輯操作

           在實際業務中我們往往選擇用同一個彈框組件來同時實現新增和編輯操作。但el-dialog彈框的visible.sync設置顯示和隱藏往往帶來很多額外的工作:處理數據的變更,帶校驗表單的內容移除和校驗清除等      

原创 Element 樹形控件el-tree在實際項目中的應用demo

整理了一下Element樹形控件el-tree在實際項目中的完整應用代碼,包括樣式和功能都有做處理,基本包括以下內容: 樣式已初步編寫,可直接應用 el-tree的滾動條出現及樣式 限制節點寬度,超出省略號並添加title 節點前圖標及樣

原创 mpvue 計算屬性computed傳參寫法console.log有輸出但頁面上沒有值

需求來源:微信小程序中要對列表的日期字符串進行處理以符合設計效果如下圖 我們用Vue開發項目應該都處理過頁面遍歷數組渲染時用computed傳參的寫法來處理數據,此時computed寫法如下: computed: {

原创 日期數據數組按實際周和實際月進行分組

需求來源:後端返回所有時間數組和數值數組,前端按天、周、月進行統計用於圖表的展示。 實現效果如下:原始數據是兩個數組,date數組存放日期,value數組存放日期對應的數值,經過按周分組和按月分組輸出week和month(2020-02-

原创 數組數據的分組處理

數組數據分組 需求來源如下,後端一次返回所有數據,前端需要對接收數據進行按天、周、月進行分組顯示(此需求不需要嚴格按照實際周和月區分,所以只按1天7天30天分組) // 圖表數據分組方法:arr1-圖表橫座標,arr2-圖表縱座標數據

原创 for of + await順序執行(用於循環請求接口)

鑑於現階段需求,大量圖片(一次限制500張)依次單張上傳,不想同時進行請求,可採用以下兩種方法,第一種請求間隔遞增,第二種間隔相同時間請求。 let a = [1,2,3,4,5]; function delay(index){

原创 vue中this.$set修改對象屬性不更新問題

小問號,你是否有很多的朋友? 當我this.$set修改對象屬性竟然沒有引發更新的時候我是崩潰的,我甚至開始懷疑起這個代碼、這個編輯器甚至這個瀏覽器在針對我_(:з」∠)_! 最終原因是初始對象中沒有這個屬性時,我直接用 obj.att

原创 改造layui-樹(tree)組件的添加、編輯、刪除操作(補充上一篇)

這篇是用來補充上一篇:改造layui-樹(tree)組件支持添加、編輯、刪除的自定義(彈框)操作(https://blog.csdn.net/liona_koukou/article/details/99824998)的,鑑於有同學問代碼