原创 你可能不知道的css騷操作 — 表單驗證🤦♂️
效果圖 原理 表單元素中，有一個pattern屬性，可以自定義正則表達式（如手機號、郵箱、身份證..）；valid僞類，可以匹配通過pattern驗證的元素；invalid僞類則相反，可以匹配未通過pattern驗證的元素；於是就可以隨
2019-08-06 13:14:11
2
原创 你可能不知道的css騷操作 — tab切換😁
效果圖 原理 我們知道，tab切換的特點就是當前只有一個顯示的內容，其餘都是不可見的，也就是說當前只有一個“選中”的對象，因此我們可以藉助input的radio類型進行“捕獲”用戶到底點了哪個tab； html 結構很簡單，隱藏的inp
2019-08-05 13:13:39
2
原创 Nuxt開發經驗分享，讓你踩少點坑！
說明 本文章基於starter-template模板進行講解，面向有vue-cli開發經驗的寶寶 vue init nuxt-community/starter-template Nuxt 官方文檔 簡單來說，Nuxt就是基於Vue的一
2019-08-05 13:13:39
1
原创 帶你入門優雅的Mo.js（圖形動畫Javascript庫）
激發興趣 Mo.js Mo.js是一個"簡潔、高效"圖形動畫庫，擁有流暢的動畫和驚人的用戶體驗，在任何設備上，屏幕密度獨立的效果都很好，你可以繪製內置的形狀或者自定義形狀，隨便，只要你喜歡，你還可以繪製多個動畫，再讓它們串聯在一起，逼話
2019-08-05 13:13:39
1
原创 html指令式tooltip文字提示，css實現，無腳本
直接上圖 分析執行流程 鼠標移入節點 檢測是該節點是否存在開啓實現tooltip實現的標識（類名，屬性等） 檢測主題、位置（類名，屬性等） 生成 / 顯示氣泡 借鑑他人 讓我們先來看看element-ui的tooltip樣式 很明
2019-08-05 13:13:39
2
原创 手把手教你用原生Javascript封裝一個Dialog組件
下來玩玩 Dialog component by native javascript 分析 對外暴露的方法 show(options) 顯示dialog options 參數 title 標題，默認爲“”，不顯示標題 content
2019-08-05 13:13:39
17
原创 webpack4.x版本各種常見配置，快來打造屬於你自己的工作流吧(2018-12-05)
更新日誌 2018-12-05 提高熱更新速度 修改html文件也觸發熱更新 逼逼兩句 關於webpack是什麼，這裏不多說，webpack官方文檔，讓我直接進入正題吧! 1.最基礎的配置 新建一個文件夾，就叫webpack吧，先安裝主
2019-08-05 13:13:39
2
原创 談談web中的scroll(滾動)
前言 本文用到的Web Api有絕對滾動element.scrollTo()、相對滾動element.scrollBy()、滾動到指定元素element.scrollIntoView() 場景 1. 滾動到頂部 window.scroll
2019-08-05 13:13:39
原创 你可能不知道的css騷操作 — switch切換😁
效果圖 原理 switch只有兩個狀態，開/關，跟input的checkbox一致，所以我們可以藉助checkbox完成樣式的切換； html 一個簡單的input <input class="switch-component" typ
2019-08-05 13:13:39
1