🧨放假了特意給大家坐火車打發時間寫了這篇工具收集類的小文, 讓大家輕輕鬆鬆學知識, 😊"鐵皮飯盒"祝大家十一快樂, 吃開心玩開心!
新手階段的前端面臨的最大問題就是: "😥這個咋做?", 這個階段的前端自己實現交互功能基本是不可能的, 那怎麼體現價值呢?
我給個建議: "不會寫還不會用嗎?", 其實js發展這麼多年,常見的功能在github上都是可以找到的, 下面我就給大家拿出我收藏多年的"救命插件"!
copy-to-clipboard (剪貼板)
var clipboard = new ClipboardJS('.btn');https://github.com/zenorocha/...
FileSaver (文件另存為)
https://github.com/eligrey/Fi...
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");excel-js (xlsx轉換)
var workbook = XLSX.utils.table_to_book(document.getElementById('table'));https://github.com/SheetJS/js...
jsPDF (生成pdf)
var doc = new jsPDF();
doc.text('Hello world!', 10, 10);
doc.save('a4.pdf');https://github.com/MrRio/jsPDF
fileApi (上傳, 支持進度/分段)
var uploadButton = document.getElementById('uploadButton');
FileAPI.event.on(uploadButton, 'change', function (evt){
}https://github.com/mailru/Fil...
swipe(輪播)
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">第一頁</div>
<div class="swiper-slide">第二頁</div>
<div class="swiper-slide">第三頁</div>
</div>
</div>new Swiper ('#my-swiper');https://github.com/nolimits4w...
qrcodejs(二維碼生成器)
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "你好js!",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});https://github.com/davidshimj...
autosize (textara高度自適應文字)
autosize(document.querySelectorAll('textarea'));https://github.com/jackmoore/...
shake.js (監聽手機震動)
var myShakeEvent = new Shake({
threshold: 15,
timeout: 1000
});
window.addEventListener('shake', ()=>{
// 搖晃觸發
}, false);https://github.com/alexgibson...
提示: 適合用來做"搖一搖"的活動頁面活遊戲
dayjs (時間格式轉換)
dayjs('2018').fromNow(); // 1年前https://github.com/iamkun/dayjs
progressbar (進度條)
var bar = new ProgressBar.Circle(container, {
strokeWidth: 6,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
});
bar.animate(1.0); https://github.com/kimmobrunf...
最後
😃 感謝大家閲讀, 最後推下自己的小工具, 作為工作了8,9年的老菜鳥插件用多了自己也造了幾個小工具, 大家看看有沒有需要的.
any-rule
🔥 支持vscode版本, 查證則再也不用"百度"了. 😃
vscode中搜索"any-rule"進行安裝.
https://github.com/any86/any-...
any-touch
👋一個手勢庫, 支持tap(點擊) / press(按) / pan(拖拽) / swipe(劃) / pinch(捏合) / rotate(旋轉) 6大類手勢, 同時支持鼠標和觸屏.
在線演示
import AnyTouch from "any-touch";
const el = doucument.getElementById("box");
const at = new AnyTouch(el);
at.on("pan", ev => {
// 拖拽觸發.
});tap(點擊)
用來解決移動端"click的300ms延遲問題", 同時通過設置支持"雙擊"事件.
press(按)
用來觸發自定義菜單.
pan(拖拽)
這應該是組件庫中最常用的手勢, carousel(輪播) / drawer(抽屜) / scroll(滑動) / tabs(標籤頁)等都需要"拖拽識別"
swipe(滑)
carousel/tabs的切換下一幅, scroll的快速滑動等.
pinch(捏合) / rotate(旋轉)
pinch用來縮放商品圖片, rotate一般用在高級定製化功能呢, 比如對圖片(商品)刻字後旋轉文字.
🚀 更多説明: https://github.com/any86/any-touch
vue-create-root
🍭 不到1kb的小工具, 把vue組件變成this.$xxx這樣的命令.
// main.js
Vue.use(createRoot);
// xxx.vue
import UCom from '../UCom.vue';
{
mounted(){
// 默認組件被插入到<body>尾部
this.$createRoot(UCom, {props: {value:'hello vue!'}});
// 或者簡寫為:
this.$createRoot(UCom, {value:'hello vue!'});
}
}🚀 更多説明: https://github.com/any86/vue-create-root
微信羣
感謝大家的閲讀, 如有疑問可以加我微信, 我拉你進入微信羣(由於騰訊對微信羣的100人限制, 超過100人後必須由我拉進去)
