原创 [ Vue | 組件 ] 自定義滾動條
<template> <div ref="wrapper" class="scrollbar-view-wrapper" @mousewheel="onMousewheel" @touchstart="
2020-07-07 04:18:37
原创 [ vue ] 函數式組件中的class與style處理
引言：什麼是函數式組件 沒有管理任何狀態，也沒有監聽任何傳遞給它的狀態，也沒有生命週期方法。實際上，它只是一個接受一些 prop 的函數。在這樣的場景下，我們可以將組件標記爲 functional，這意味它無狀態 (沒有響應式數據
2020-05-17 03:43:38
原创 [ typescript ] 深度定義對象只讀
As of TypeScript 2.8, this is now possible and actually an example in the PR for Conditional Types: https://github.com
2020-04-27 17:43:46
原创 [ javascript ] 簡易表單驗證
只實現簡單的表單驗證。 function checkRule(obj, key, rule) { return rule.valid ? rule.valid(obj[key]) : true } function valida
2020-04-24 14:43:55
原创 [ npm ] 配置與Registry管理
npm config 首先使用 npm config -h ，查看它的相關信息以及命令行。 npm config set <key> <value> # 設置 npm 配置 npm config get [<key>]
2020-04-20 21:08:36
原创 [ sass/scss ] 自定義函數 去單位 px轉em
去單位 在使用scss過程中，一直會有個疑惑它的內部是如何運作的。實際上它的運作與現實生活中一直。如果你想要移除一個值的單位，你想要將它除以1單位。比如 50cm 我想取它的數字，那麼我們除以1cm，得到結果是 50(由1cm x 50
2020-04-15 09:06:25
原创 [ webpack ] 在HTML源代碼前加上自動加上備註說明
打包環境：webpack4 1. 思考 如何在打包過程中在<html>標籤前自動生成備註說明？ 使用html-webpack-plugin進行html生成。 翻閱源代碼，發現有`html-webpack-plugin-before-htm
2020-03-11 04:58:15
原创 [ javascript ] 如何判斷元素內容被截斷。
可以用元素的scrollWidth屬性和元素的clientWidth屬性進行大小比較就可以判斷。高也是同理。 Demo代碼： <!DOCTYPE html> <html lang="en"> <head> <meta ch
2020-02-21 02:24:34
原创 [ Vue ] 給 slot 插槽綁定事件
最近寫了一個下拉組件，希望任意形式的觸發源點擊都可以展開這個組件。 最終效果圖如下： 方案一：slot-scope 傳方法 <!-- 僞代碼:下拉框組件 --> <template> <slot change-display
2019-10-25 16:41:38
原创 [ Vue ] vue-cli3生成項目下的自定義 svg 圖標庫
前置步驟：添加依賴 yarn add svg-sprite-loader -D [可選] yarn add svgo svgo-loader -D 依賴說明： svg-sprite-loader sprites 會被自動渲染和注入
2019-09-09 16:18:45
原创 [ electron | ipc通信 ] 自定義標題欄，實現 最小化、最大化、關閉、全屏
前置步驟：BrowserWindow 實例化，將 frame 設爲 false 創建無邊框窗口，即不帶外殼（包括窗口邊框、工具欄等），只含有網頁內容的窗口。 // 創建瀏覽器窗口 win = new BrowserWindow({
2019-09-08 16:15:53
1
原创 [ vue | electron ] 使用 vue-cli3.x 快速構建 electron 項目
重要 此方法僅用於 Vue-CLI 3 (vue create my-app) 創建的項目，不適用 Vue-CLI 2 (vue init webpack my-app)! 如果想使用 Vue-CLI 2 ，可以參考 electron-
2019-08-31 15:59:56
1
原创 [ node | koa2 ] 喜馬拉雅JSSDK簽名服務
[ node | koa2 ] 喜馬拉雅JSSDK簽名服務 Github項目 支持sdk版本: @xmly-fem/web-jssdk v1.1.1 服務端 Node 版本：v10.16.0 喜馬拉雅web-jssdk相關文檔 配
2019-08-28 16:42:53
5
原创 [ javascript | console ] 如何用 console 輸出 HTML DOM 屬性，而不是 DOM 文檔
如果用 console.log 去輸出 DOM 會出現如下圖的結果 方法一：console.log('%O',DOM) 方法二：輸出 DOM 數組的形式 方法三：使用 console.dir
2019-08-08 16:21:49
9
原创 [ webpack | moment ] moment精簡打包
moment默認導入，會引入全部的語言資源文件。 而我們最終使用到的語言資源僅僅是其中的一部分。 默認導入打包後文件大小情況： 我們現在的目的是精簡左邊的 locale 語言資源文件。 方案一：使用 webpack.IgnorePlug
2019-08-07 16:17:10
3