背景 我司有很多需要進(jìn)行權(quán)限管理的產(chǎn)品。其中有一個(gè)產(chǎn)品,需要給多個(gè)客戶部署前中后臺(tái)。在開(kāi)發(fā)第一個(gè)版本時(shí),代碼全部分離。前端三套,后端三套。加上kafka,redis,算法,數(shù)...
背景 我司有很多需要進(jìn)行權(quán)限管理的產(chǎn)品。其中有一個(gè)產(chǎn)品,需要給多個(gè)客戶部署前中后臺(tái)。在開(kāi)發(fā)第一個(gè)版本時(shí),代碼全部分離。前端三套,后端三套。加上kafka,redis,算法,數(shù)...
vue-emoji-comment 最近在寫(xiě)自己的個(gè)人博客時(shí),還差最后一個(gè)評(píng)論功能,一個(gè)沒(méi)有評(píng)論功能的博客是沒(méi)有靈魂的,哈哈哈。 項(xiàng)目源碼:https://github.co...
業(yè)務(wù)需求 多選近三個(gè)月的日期。 不能選擇當(dāng)日之前的日期。 因?yàn)閍ntd的日期組件都是選擇單個(gè)日期或者日期范圍。不符合需求,所以自己就實(shí)現(xiàn)了一個(gè)。寫(xiě)的不好的地方大家請(qǐng)指教 效果...
最近工作有點(diǎn)忙,沒(méi)時(shí)間寫(xiě)blog。進(jìn)度有點(diǎn)慢。這里主要是實(shí)現(xiàn)了自定義的dialog組件。checkbox組件。radio組件。大家感興趣的話可以clone一下看看源碼 效果展...
不知道大家在用一些UI框架,比如Element-ui的時(shí)候,有沒(méi)有覺(jué)得一些全局組件。this.$message(),this.Toast()等,用起來(lái)很爽。他們不像其他的組件...
之前缺乏移動(dòng)端的經(jīng)驗(yàn)。一直不知道上拉加載,下拉刷新是怎么實(shí)現(xiàn)的?,F(xiàn)在正好有個(gè)產(chǎn)品有這樣一個(gè)需求。想了一會(huì)沒(méi)有思路。就去找插件。啥vue-infinite-scroll,vue...
不知道大家有沒(méi)有遇到這種情況。平時(shí)過(guò)于依賴組件庫(kù),如果產(chǎn)品對(duì)某個(gè)組件有特殊的要求。我們與其去改,去覆蓋組件庫(kù)的源碼。還不如自己寫(xiě)一個(gè)組件,畢竟是自己寫(xiě)的,不管你想怎么改,都方...
引入mavonEditor進(jìn)行文章編輯,前端部分大概成形ArticleEdit.vue 效果展示 項(xiàng)目地址 https://github.com/pppercyWang/tw...
主要是要寫(xiě)input組件,以及實(shí)現(xiàn)點(diǎn)擊區(qū)域外部的區(qū)域,關(guān)閉該區(qū)域,用css畫(huà)三角形。將登錄區(qū)域絕對(duì)定位到header。具體的細(xì)節(jié)可以看源碼BlogInput.vue 效果展示...
個(gè)人信息欄目主要實(shí)現(xiàn)一個(gè)帶下劃線的文字組件,很多地方都可以用到??梢栽O(shè)置顏色,字體大小,是否是粗體,下劃線的高度TextUnderline.vue 效果展示 項(xiàng)目地址 htt...
twitter的Button組件實(shí)現(xiàn)最主要的是點(diǎn)擊時(shí)的藍(lán)色邊框的彈出動(dòng)畫(huà)效果,長(zhǎng)按時(shí)彈到最大范圍且邊框不動(dòng)。這直接讓我想到了偽類 active,通過(guò)偽元素加上偽類就很好的實(shí)現(xiàn)...
中部導(dǎo)航欄的Menu-Item跟頭部導(dǎo)航欄差不多。但是需要設(shè)置一個(gè)default-active參數(shù)。還有路由變化時(shí)菜單激活項(xiàng)的變化。頭像的變化可以使用transition實(shí)現(xiàn)...
接下來(lái)是中部導(dǎo)航欄。我們看到這里的頭像動(dòng)畫(huà),和中部導(dǎo)航欄定位都是跟鼠標(biāo)滾動(dòng)有關(guān)的。我們先將布局實(shí)現(xiàn)一下。這里是要求在頁(yè)面上部分滾動(dòng)范圍內(nèi),導(dǎo)航欄一直在div的上部,隨著鼠標(biāo)的...
實(shí)現(xiàn)twitter頁(yè)面的這種拉幕效果不是很難。但以前看到anijs官網(wǎng)的那種從下面往上面覆蓋的拉幕效果感覺(jué)更好。所以自己就嘗試了下。這里我希望每個(gè)頁(yè)面都有這個(gè)拉幕效果,所以就...
為什么要用精靈圖? 比如京東首頁(yè)的這些icon,如果每個(gè)icon都去請(qǐng)求一個(gè)資源。是非常浪費(fèi)資源的。因?yàn)槲覀優(yōu)g覽器在同一個(gè)域名下并發(fā)加載的資源(CSS、JS 、圖片等)數(shù)量是...
這個(gè)頭部導(dǎo)航主要是寫(xiě)一個(gè)menu-item組件,hover時(shí)底部的藍(lán)色底邊動(dòng)畫(huà)彈出。再將logo扣出精靈圖。MenuItem: 扣精靈圖可以看俺的這篇文章https://ww...
vue生態(tài)十分的強(qiáng)大,UI組件庫(kù)越來(lái)越多。而過(guò)分依賴組件庫(kù),只會(huì)導(dǎo)致自己的技術(shù)越來(lái)越爛。組件的編寫(xiě),樣式的書(shū)寫(xiě),動(dòng)畫(huà),適配,媒體查詢等很多都不記得了。 自己一直想著寫(xiě)一個(gè)博客...
圖標(biāo)庫(kù)是iconfont,這里面的圖標(biāo)夠用了吧 一.新建項(xiàng)目 二.選擇喜歡的圖標(biāo),加入購(gòu)物車,再添加到項(xiàng)目 三.生成代碼 四.將鏈接粘貼到地址欄,將css內(nèi)容復(fù)制到icon....
關(guān)于vuex,我們聽(tīng)到最多的是vuex是一個(gè)狀態(tài)管理容器,可以解決組件之間通信的痛點(diǎn)。但vuex真的只是這樣嗎? 平時(shí),我更喜歡將vuex比喻成一個(gè)前端程序的數(shù)據(jù)庫(kù)。他可以儲(chǔ)...
最近經(jīng)??吹絋ypescript的一些文章。決定自己也嘗試用一下,寫(xiě)了一個(gè)移動(dòng)端和PC端的項(xiàng)目模板。感覺(jué)還不錯(cuò)??赡躹ue2.x和對(duì)ts的支持不是很好(期待vue3,將用ts...