@rpdg/revue-utils
v1.0.85
Published
A typescript library for react and vue
Downloads
331
Maintainers
Readme
A typescript toy kit library for react.js and vue.js
This is a tool library written in TypeScript that mainly provides encapsulation of a series of commonly used methods, including graphic processing, WeChat functions, file handling, string processing, etc.
install
npm i -S @rpdg/revue-utils
vue/useEventListener
Attaching an event when the component is mounted and activated, then removing the event when the component is unmounted and deactivated.
import { ref } from 'vue';
import { useEventListener, useClickAway } from '@rpdg/revue-utils/vue/use';
export default {
setup() {
const root = ref();
useClickAway(root, () => {
console.log('click outside!');
});
// attach the resize event to window
useEventListener('resize', () => {
console.log('window resize');
});
// attach the click event to the body element
useEventListener(
'click',
() => {
console.log('click body');
},
{ target: document.body }
);
},
};
wechat utils
- convert wechat local image ids to image files
import {localIdsToFiles} from '@rpdg/revue-utils/Wechat';
wx.chooseImage({
success: async function (res: any) {
let localIds = res.localIds as string[];
let filePaires = await localIdsToFiles(localIds);
},
});
- initial wechat js sdk
import { readyAsync } from '@rpdg/revue-utils/Wechat';
async function init() {
await readyAsync(cfg);
}
- wechat share
import { shareAsync } from '@rpdg/revue-utils/Wechat';
async function init() {
await shareAsync(['timeline', 'appMessage'], options);
}
wechat pay
import { payAsync } from '@rpdg/revue-utils/Wechat'; // ... await payAsync(options);
Image utils
checkExists
import { checkExists } from '@rpdg/revue-utils/Image'; await checkExists('https://www.google.com/images/branding/googlelogo_92x30dp.png');
imgCompress
import { imgCompress } from '@rpdg/revue-utils/Image'; await imgCompress(srcBase64, 1280, 0.9); //
checkImageSize
import { checkImageSize } from '@rpdg/revue-utils/Image'; let {width, height} = await checkImageSize('https://gitee.com/static/images/logo.png');
fileToBase64
import { fileToBase64 } from '@rpdg/revue-utils/Image'; await fileToBase64(imgFile);
canvasToImage
import { canvasToImage } from '@rpdg/revue-utils/Image'; canvasToImage(canvasElem , imgElem);
downloadImage
import { downloadImage } from '@rpdg/revue-utils/Image'; await downloadImage(imgElem , 'img1.jpg');
getImageData
Retrieves the pixel data from an HTMLImageElement, optionally scaling the image to a specified size.
It creates an OffscreenCanvas, draws the image onto it, and then extracts the image data as a Uint8ClampedArray.
import { getImageData } from '@rpdg/revue-utils/Image'; let img = document.getElementById('demoImg'); let data = getImageData(img, 64);
threshold
import {threshold, drawImageData} from '@rpdg/revue-utils/Image'; const scaledSize = 64; let img = document.getElementById('demoImg'); let data = getImageData(img, scaledSize); data = threshold(data, 180); let w = img.naturalWidth, h = img.naturalHeight; if (w > h) { h = scaledSize; w = Math.round(img.naturalWidth * (h / img.naturalHeight)); } else { w = scaledSize; h = Math.round(img.naturalHeight * (w / img.naturalWidth)); } drawImageData(data, w, h);
drawSvgOnCanvas
// Create an SVG element const svgNS = "http://www.w3.org/2000/svg"; // Namespace for SVG const svgElement = document.createElementNS(svgNS, "svg"); svgElement.setAttribute("width", "200"); svgElement.setAttribute("height", "200"); // Create a circle element const circle = document.createElementNS(svgNS, "circle"); circle.setAttribute("cx", "100"); circle.setAttribute("cy", "100"); circle.setAttribute("r", "80"); circle.setAttribute("fill", "blue"); // Append the circle to the SVG element svgElement.appendChild(circle); // Append the SVG to the document for reference document.getElementById('svg-container').appendChild(svgElement); // Call the drawSvgOnCanvas function const canvas = await drawSvgOnCanvas(svgElement); // Optionally, append the canvas to the document body document.body.appendChild(canvas);
drawImageOnCanvas
const imageUrl = 'http://example.com/nonexistent.jpg'; const canvas = await drawImageOnCanvas(imageUrl);
File
import {getFileName, getFileExt, normalizeSuffix} from '@rpdg/revue-utils/File';
let fileFullName = 'abcd.test.jpg';
getFileName(fileFullName); // 'abcd.test'
getFileExt(fileFullName); // 'JPG'
normalizeSuffix('.Docx'); // 'DOCX'
DOM
import {createFragment, download, getStyle} from '@rpdg/revue-utils/Dom';
createFragment(`<div>abc</div><p>def</p>`);
download('file.txt' , ['some text', '\n', 'next text']);
getStyle(document.body, 'font-size')
JsonStorage
import JsonStorage from '@rpdg/revue-utils/JsonStorage';
type Book = {
title: string,
isbn: string,
};
let book: Book = {
title: 'Publish News Letter',
isbn: '978-93-8067-432-2',
};
JsonStorage.set('book', book);
let book2 = JsonStorage.get < Book > 'book'; // typed Book object
String
import { padLeft, padRight } from '@rpdg/revue-utils/String';
padLeft('A', 4); // '000A'
padRight('A', 4); // 'A000'
Math2
fix the error of js floating point operation
import * as Math2 from '@rpdg/revue-utils/Math';
0.1+0.2; // 0.30000000000000004
Math2.add(0.1 , 0.2); // 0.3
0.15/0.2; // 0.7499999999999999
Math2.div(0.15, 0.2); // 0.75
Math2.format(1234.5678, 2); // return: 1234.57
// Median
Math2.median([23, 29, 20, 32, 23, 21, 33, 25]); // 20
// Standard Deviation
Math2.stdEVP([0,5,9,14]); // 5.1478150704935
Math2.stdEVP([5,6,8,9]); // 1.5811388300841898
// percents
Math2.percent(2 , 10); // 20.0%
Math2.percent(2 , 10 , 2); // 20.00%
Math2.percent(2 , 10 , 0); // 20%
Math2.percent(2 , 0); // --%
// fixed point
(859.385).toFixed(2); // '859.38' <- not rounding
Math2.toFixed(859.385, 2); // 859.39 <- round
DateTime
import DateTime from '@rpdg/revue-utils/DateTime';
DateTime.addDays(new Date(), 7); // add 7 days
DateTime.format(new Date(), 'yyyy/MM/dd HH:mm'); // 2022/02/28 10:04
Array
import { litterN, sortOnProp, shuffle} from '@rpdg/revue-utils/Array';
litterN(50, 100); // [50, 51, 52, ... 99, 100];
let arr = [
{ age: 5, name: 'Tom' },
{ age: 2, name: 'Jerry' },
{ age: 3, name: 'Whoever' },
];
sortOnProp(arr, 'age'); // [{age: 2 , name:'Jerry'}, { age: 3, name: 'Whoever' }, {age:5 , name: 'Tom'}]
shuffle(arr);
Url
import { request , url } from '@rpdg/revue-utils/Url';
// page url : some.html?id=a01&name=tom
console.log(reuqest['id']); // a01
console.log(request['name']); // tom
url.setParam("some.html?id=a01&name=tom", {name:'Bob'} ); // some.html?id=a01&name=Bob
url.getParam("some.html?id=a01&name=tom" , "id"); // a01
Validates
import { is } from '@rpdg/revue-utils/Validates';
is.Array([1,2,3]); // true
is.Date(new Date); // true
is.Number("123"); // false
is.String("123"); // true
Hardware
import { startVibrate , startPeristentVibrate , stopVibrate } from '@rpdg/revue-utils/Hardware';
startVibrate(1000) // 振动一次
startVibrate([1000, 200, 1000, 2000, 400]) //震动多次
startPeristentVibrate(1000, 1500) //持续震动
stopVibrate() //停止震动