原创 用vue寫輪子的一些心得（九）——table表單組件

  需求分析 支持斑馬紋，默認斑馬紋樣式； 支持表格邊框線，默認沒有邊框線； 支持table內容padding間距配置（是否爲緊湊型）； 支持給table設置高度； 支持全選與全選取消，默認不展示； 支持給任意選項排序； 支持請求數據時

2020-06-13 19:20:33 4

原创 用vue寫輪子的一些心得（八）——pager分頁器組件

需求分析 支持傳入當前頁碼參數並展示； 支持頁數過多的部分用省略號顯示，並會動態變化； 支持支持點擊左右方向鍵切換頁碼； 支持在只有一頁的時候隱藏pager；   方法實現 1、pager外部組件傳參定義： 一共可傳4個參數： tota

2020-06-02 03:58:05

原创 用vue寫輪子的一些心得（七）——表單校驗組件

  需求分析 支持內置校驗器，比如：郵箱校驗、手機號校驗等等； 支持自定義校驗器； 支持自定義校驗器，並不會造成全局污染，每次new一個新實例；   方法實現 1、表單校驗基礎搭建： 校驗器組件邏輯，首先校驗必填項，required: t

2020-05-25 04:41:28

原创 用vue寫輪子的一些心得（六）——nav導航欄組件

需求分析 支持橫向導航豎嚮導航； 支持導航click展開下拉列表； 支持下拉列表click展開二級下拉列表，可任意層級； 配有展開動畫；   方法實現 1、定義組件： 在html中定義 t-nav組件定義爲最外層導航欄包裹器，nav-i

2020-05-19 08:48:22

原创 用vue寫輪子的一些心得（五）——Slides輪播組件

需求分析 Slides組件通常包括一下功能： 可支持自動播放 可設置自動播放時間 輪播圖片高寬可自適應 支持觸屏滑動輪播 可無縫輪播   方法實現 1、定義組件： 在html中定義 t-slides組件定義爲最外層輪播圖包裹器，t-sli

2020-05-13 10:44:33 3

原创 Vue中的六種過渡動畫解析

過渡CSS的類名： v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。 v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之

2020-05-06 16:58:09

原创 Vue Composition API 原文翻譯

摘要： Composition API簡介：一組基於函數的附加API，允許靈活地組成組件邏輯   基本例子 ： <template> <button @click="increment"> Count is: {{ st

2020-04-23 05:35:22

原创 vue中函數回調傳值

在業務開發中，有時候會碰到一種情況：組件內部會觸發一些事件用來請求新的數據，數據請求到後將新的數據繼續在組件內進行處理。這個場景我們有三種方式可以實現它： 將數據請求寫在組件內部，缺點不好維護，違反了單項數據流的原則。 通常我們可以通過t

2020-04-21 12:21:48

原创 如何在vue中，不知道有幾層v-for的情況下實現遞歸組件？

有一個需求，需要我們渲染一個未知層級關係的cascader級聯選擇器。這樣在template模版當中是無法寫死v-for嵌套的，因爲數據是活的，可能三個嵌套子集，也有可能有四個。下面是element-ui當中的例子：  那麼我們如何解決

2020-04-19 08:40:53

原创 什麼是EventLoop？

什麼是EventLoop（事件循環）？ event loop 是一種計算機系統運行的機制，由於JavaScript是一門自誕生起就是單線程運行的語言，當按順序執行代碼在代碼當中出現異步時，內核會將異步任務加入到輪詢隊列中，等當前任務執行完

2020-04-02 07:03:42

原创 Promise 與 async await 面試知識點

Promise的正常用法 function xx(){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ resovle('成

2020-02-27 08:59:19

原创 手寫Promise函數

TS源碼： class Promise2 { state = 'pending' callbacks= [] resolve(result) { setTimeout(()=>{

2020-02-24 06:39:09

原创 用vue寫輪子的一些心得（四）——Popover組件

需求分析 Poppver組件通常包括一下功能： 點擊按鈕根據按鈕位置彈出彈出層，彈出層始終保持在最上方 可以定義彈出位置，支持上下左右彈出 支持可點擊彈出內容，彈出層不會消失 彈出內容支持插入純文字或者html結構 支持鼠標移入彈出，移出

2020-02-22 12:38:29 2

原创 手寫Function.prototype.bind()函數

源碼： 支持new 綁定 //兼容IE6寫法 var slice = Array.prototype.slice function ieBind(ieThis) { var args = slice.call(arguments

2020-02-22 12:38:29

原创 this變態面試題

let length = 10 function fn(){console.log(this.length)} let obj = { length: 5, method(fn){ fn()

2020-02-22 12:38:29