JS
file-saver 保存文件到硬盤
npm install file-saver
import { saveAs } from 'file-saver';
FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })
{ autoBom: true }時 FileSaver.js 將自動提供 Unicode 文本編碼提示（字節(jié)順序標(biāo)記）。Blob 類型設(shè)置為charset=utf-8的情況下才能執(zhí)行此操作嗦锐。
- 示例
//blob
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");
//url
saveAs("https://httpbin.org/image", "image.jpg");
//file
var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
saveAs(file);
jszip 文件壓縮
npm install jszip
import JSZip from "jszip";
- 示例
var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");//壓縮文件中添加文件Hello.txt
var img = zip.folder("images");//壓縮文件中添加文件夾images
img.file("smile.gif", imgData, {base64: true});//文件夾images中添加文件smile.gif imgData類型為base64
img.file("Hello.txt", "Hello World\n");//文件夾images添加文件Hello.txt
img.remove("Hello.txt");//移除文件夾images中添加的文件Hello.txt
//zip.remove("images/Hello.txt");//效果同上
zip.generateAsync({type:"blob"})//生成壓縮文件 類型為blob
.then(function(content) {
saveAs(content, "example.zip");//見file-saver
});
var zip = new JSZip();
zip.loadAsync(content)//讀取壓縮包內(nèi)容
.then(function(zip) {
zip.file("hello.txt").async("string").then(res => {//讀取壓縮包中的hello.txt
res//Hello World\n
});
zip.file("images/smile.gif").async("blob").then(res => {//讀取壓縮包中的images/smile.gif
res//smile.gif的blob
});
});
js-cookie cookie處理
npm install js-cookie
import Cookies from 'js-cookie'
- 示例
Cookies.set('name', 'value')//添加一個cookie 關(guān)閉頁面后清空
//等同于window.document.cookie="name=value;"
Cookies.get('name')//value 獲取cookie值
Cookies.get()//{ name: 'value' } 獲取全部cookie
Cookies.remove('name')//刪除cookie
Cookies.set('name', 'value', { expires: 7 })//添加一個7天有效期的cookie
Cookies.set('name', 'value', { path: '' })//添加一個當(dāng)前頁面可用的cookie
Cookies.get('name') // value 獲取cookie值
Cookies.remove('name'寄锐， { path: '' })//刪除當(dāng)前頁面的cookie
Cookies.set('name', 'value1', { domain: 'xxx.xxx.com' })//添加一個xxx.xxx.com域可用的cookie
Cookies.get('name', { domain: 'xxx.xxx.com' })//value1 獲取該域的cookie值
Cookies.remove('name'， { domain: 'xxx.xxx.com' })//刪除該域的cookie
Cookies.set('name', 'value', { secure: true })//指示 Cookie 傳輸是否需要安全協(xié)議 https
Cookies.set('name', 'value', { sameSite: 'strict' })//允許瀏覽器是否在發(fā)送跨站點請求的同時發(fā)送 Cookie。
const api = Cookies.withAttributes({ path: '/', domain: '.example.com' })//給cookie設(shè)置默認(rèn)的域和路徑
crypto-js 加密
npm install crypto-js
import CryptoJS from 'crypto-js'
- 示例
var hash = CryptoJS.MD5("Message");//md5加密
var hash = CryptoJS.SHA256("Message");//sha256加密
var encrypted = CryptoJS.AES.encrypt("Message", "Secret Passphrase");//aes加密
var decrypted = CryptoJS.AES.decrypt(encrypted, "Secret Passphrase");//aes解密
moment 日期處理庫
npm install moment
import moment from "moment";
- 示例
var now = moment();//獲取當(dāng)前日期的moment
now.format("yyyy-MM-DD HH:mm:ss SSS");//解析為字符串2022-01-01 11:11:11 111
now.add(7, 'days');//日期增加7天
now.format("yyyy-MM-DD HH:mm:ss SSS");//解析為字符串2022-01-08 11:11:11 111
clipboard 將內(nèi)容放入剪切板
npm install clipboard
import ClipboardJS from 'clipboard';
- 示例
let clipboard = new ClipboardJS('.btn');
//clipboard.destroy();//銷毀實例
//點擊按鈕復(fù)制輸入框的內(nèi)容123
<input id="foo" value="123">
<button class="btn" data-clipboard-target="#foo">
復(fù)制
</button>
//點擊按鈕剪切輸入框的內(nèi)容123
<input id="foo" value="123">
<button class="btn" data-clipboard-target="#foo" data-clipboard-action="cut">
剪切
</button>
//點擊按鈕復(fù)制123
<button class="btn" data-clipboard-text="123">
復(fù)制
</button>
//用js實現(xiàn)功能
<input id="foo" value="123">
<button class="btn">
復(fù)制
</button>
new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;//復(fù)制同胞元素(即input)的內(nèi)容
}
});
<button class="btn">
復(fù)制
</button>
new ClipboardJS('.btn', {
text: function(trigger) {
return "123",//復(fù)制123
}
});
axios 獲取服務(wù)端數(shù)據(jù)
npm install axios
import axios from 'axios';
- 示例
//下載圖片
axios({
method:'get',
url:'/api/getPicture',
headers: {Authorization: "1234567890"},
params: {
name: "zhangsan"
},
responseType:'blob'
}).then(res => {
FileSaver.saveAs(res.data, "zhangsan.jpg");
})
//保存圖片
axios({
method:'post',
url:'/api/savePicture',
headers: {Authorization: "1234567890"},
data: {
name: "zhangsan",
blob: new Blob()
},
}).then(res => {
})
// 并發(fā)
axios.all([axios.get("/api/getPicture?name=zhangsan"), axios.get("/api/getPicture?name=lisi")])
.then(axios.spread(function (acct, perms) {
// 兩個請求現(xiàn)在都執(zhí)行完成
}))
詳見axios
mockjs 攔截網(wǎng)絡(luò)請求生成虛假數(shù)據(jù)
npm install mockjs
import Mock from 'mockjs';
- 示例
Random.date()//生成日期占位符
Random.time()//生成時間占位符
Mock.mock("/api/user", "POST", {
'list|1-10': [{//生成一個數(shù)組list 有1-10個對象
'name': "zhangsan",//生成一個屬性name 值為zhangsan
'adress|3': "cd",//生成一個屬性adress 值為cdcdcd
'id|+1': 1,//生成一個屬性id 值為自增數(shù)字1 2 3 4
'age|10-30': 1//生成一個屬性age 值為10-30中的整數(shù)
'money|100-1000.0-2':1,//生成一個屬性money，它是浮點數(shù)，整數(shù)在100-1000之中谤祖，小數(shù)保留0-2位，如555.1
'birthday': "@date @time",//生成屬性birthday 由占位符@date @time組成老速，即2000-01-01 12:00:00
}]
})
axios.post('/api/user').then(res => {
res
//[{name: "zhangsan", adress: "cdcdcd", id: 1, age: 20, money: 333.20, birthday: "2020-11-11 11:11:11"}]
})
詳見Mock
viewerjs 圖片瀏覽器
npm install viewerjs
import Viewer from 'viewerjs';
new Viewer(element[, options])
- 示例
//顯示一張圖片
<img id="image" src="picture.jpg" alt="Picture">
const viewer = new Viewer(document.getElementById('image'), {
//配置
})
//當(dāng)點擊圖片后則會顯示該圖片瀏覽器 或者手動調(diào)用viewer.show()
//顯示多張圖片
<div id="images">
<img src="picture1.jpg">
<img src="picture2.jpg">
<img src="picture3.jpg">
</ul>
const viewer = new Viewer(document.getElementById('images'), {
})
//當(dāng)點擊圖片后則會顯示該圖片瀏覽器 或者手動調(diào)用viewer. view(2) 數(shù)字為顯示第幾張圖片
xlsx 表格處理
npm install xlsx
import XLSX from 'xlsx'
- 示例
// 導(dǎo)入xlsx
// 創(chuàng)建input file
let input = document.createElement('input')
input.setAttribute('id', 'fileInput')
input.setAttribute('type', 'file')
input.setAttribute('accept', '.xlsx,.xls')//只能選擇xlsx xls
input.setAttribute("style", 'visibility:hidden')//隱藏元素
document.body.appendChild(input)//添加到body上
// 監(jiān)聽選擇事件
input.addEventListener('change', val => {
let file = val.target.files[0] //取選擇的第一個文件
if (file) {
let reader = new FileReader()
reader.onload = function(e) {
// 文件讀取完成
// 將文件轉(zhuǎn)換為workbook
let wb = XLSX.read(e.target.result, {
type: "binary"
})
let sheetName = wb.SheetNames[0]
// xlsx數(shù)據(jù)轉(zhuǎn)換為[{title1: "value1",title2: "value2"}]
let json = XLSX.utils.sheet_to_json(wb.Sheets[sheetName])
//移除元素
document.body.removeChild(input)
}
// 讀取文件
reader.readAsBinaryString(file)
}
})
//觸發(fā)點擊事件彈出文件選擇
input.click()
//導(dǎo)出xlsx
// 創(chuàng)建一個工作薄對象
let wb = XLSX.utils.book_new()
// 將json數(shù)據(jù)轉(zhuǎn)換為工作表 datas [{title1: "value1", title2: "value2"}]
let ws = XLSX.utils.json_to_sheet(datas, {
header: ["title1", "title2"]//表頭標(biāo)題
})
// 工作薄中添加一個表sheet 表的內(nèi)容為ws
let sheetName = "sheet"
wb.SheetNames.push(sheetName)
wb.Sheets[sheetName] = ws
//導(dǎo)出工作薄
XLSX.writeFile(wb, "test.xlsx")
詳見 xlsx 與 xlsx低版本中文文檔
qs 字符串解析器
npm install qs
import qs from 'qs';
- 示例
let a = "?title=hello&id=123456&name=cd/zhangsan"
let b = qs.parse(a, { ignoreQueryPrefix: true })//{title: 'hello', id: '123456', name: 'cd/zhangsan'}
//ignoreQueryPrefix的作用是在解析前去掉前面的?
let c = qs.stringify(b)//'title=hello&id=123456&name=cd%2Fzhangsan'
let d = qs.stringify(b, { addQueryPrefix: true, encode: false})//'?title=hello&id=123456&name=cd/zhangsan'
//addQueryPrefix的作用是在字符串前添加? encode默認(rèn)為true粥喜，作用是將字符串 URI 編碼 /會被編碼為%2F
詳見qs
UI
vuescroll 自定義滾動條
npm install vuescroll
import vuescroll from 'vuescroll';
export default {
components: {
vuescroll
}
};
- 示例
<template>
<div>
<vue-scroll :ops="ops" style="height: 500px;">
<div style="height: 800px;"></div>
</vue-scroll>
</div>
</template>
<script>
import vuescroll from 'vuescroll'
export default {
components: {
vuescroll
},
data: function() {
return {
ops: {
vuescroll: {}, //基本設(shè)置
scrollPanel: {}, //滾動設(shè)置
rail: {}, //滾動條軌道設(shè)置
bar: {}, //滾動條設(shè)置
scrollButton: {}, //滾動條上下或左右箭頭按鈕的設(shè)置
}
}
}
}
</script>
vue-qrcode 二維碼 vue-barcode 條形碼
npm install @chenfengyuan/vue-qrcode
import VueQrcode from '@chenfengyuan/vue-qrcode';
npm install @chenfengyuan/vue-barcode
import VueBarcode from '@chenfengyuan/vue-barcode';
- 示例
<template>
<div>
<vue-qrcode value="Hello, World!" :options="options"></vue-qrcode>
<vue-barcode value="Hello, World!" :options="options"></vue-barcode>
</div>
</template>
<script>
import VueQrcode from '@chenfengyuan/vue-qrcode'
import VueBarcode from '@chenfengyuan/vue-barcode';
export default {
components: {
VueQrcode,
VueBarcode
},
data: function() {
return {
options: {
}
}
}
}
</script>
nprogress 進度條
npm install nprogress
import NProgress from "nprogress"
- 示例
NProgress.configure({ showSpinner: true, parent: '#aaa' });//配置
//showSpinner默認(rèn)為true，界面右上角有一個圈圈在轉(zhuǎn)
//parent默認(rèn)為document.body橘券，即在整個界面上顯示進度條 #aaa表示在id="aaa"的元素上顯示進度條
NProgress.start()//開始走進度
NProgress.done()//進度完成
效果如下
詳見nprogress
