Ivy2 NPM | npm.io

GitHub

English | 中文

Introduction

Ivy2 is a free and open source typescript toolbox.can be used in Vue, React, Angular

Feature

use 👍eslint+prettier+rollup+typescript+babel. The dependency package includes the following parts(That is to say, you can directly import and use the following packages in your project):

Install and usage

INSTALL

$ npm i ivy2 --save
Note: ivy2 encapsulates axios and echarts, if you want to enable related

API Reference

🥇 axios related:

By encapsulating axios to implement error handling (when the interface uses async await, error handling can also be performed by default), and provide cancel request service, and you can also set whether to return native response...

🌞 type

IAxios - When a new IAxios instance is created, axios is automatically initialized and a unified interceptor that handles request errors is generated by default.
CreateAxiosOptions
AxiosTransform
Result 🌙 method
createAxios - Generate an instance of the IAxios type
getAxiosInstance - IAxios instance method, get axios instance
configAxios - IAxios instance method, configure axios instance
setHeader - IAxios instance method, set custom instance default headers
supportFormData - IAxios instance method, by judging whether the post request is made with application/x-www-form-urlencoded, and the config is processed
get - IAxios instance method, same as get in axios
post - IAxios instance method, same as post in axios
put - IAxios instance method, same as put in axios
delete - IAxios instance method, same as delete in axios
request - IAxios instance methods, do not use aliases get, post, put, delete. Use the request method directly, and implement the calling interface by passing in parameters
uploadFile - IAxios instance method, use formData to upload files (you can also upload multiple at a time) -->
checkStatus - The network request returns the status check set

🥇 echarts related:

By encapsulating echarts`` andelement-resize-detector` to implement echarts adaptive window changes, and you can set whether to implement refresh echarts

🌞 type

IChart - When a new IChart instance is created, the echarts instance is automatically initialized
🌙 method
createChart - Generate an instance of the IChart type
getChartInstance - IChart instance method, get echarts instance
setOption - IChart instance method, set the options of echarts
refreshChart - IChart instance method, refresh echarts
disposeChart - IChart instance method, destroy the echarts instance
getChartOption - IChart instance method, get the option configuration of echarts

🥇 form related:

Through the api, we finally generate an object of {_form, _rules} structure, _form is the form data, _rules is the form validation, these two values can be obtained by destructuring assignment

🌞 type

BaseStructs - Prepare an array of type BaseStructs for generating {_form,_rules}🌙 method
formChecker - The validation rule set that comes with ivy2 is implemented through async-validator` (in the array of BaseStructs type, the validator in the rule field can directly use the rules in the formChecker rule set in addition to customization) Currently include:
1. scoreChecker - Check if scoring rule is empty
2. phoneChecker - Verify that the entered mobile number is correct
3. easyPasswordChecker - Check the simple password, whether the length range is between 6-20 digits

More rules are still being enriched...

generateFormAndRules - for generating _form, _rules

example:

// records.ts
import type { BaseStructs } from 'ivy2'
import { formChecker } from 'ivy2'

function createFormAndRule(): BaseStructs
function createFormAndRule() {
  return [
    {
      label: 'username',
      default: '',
      required: true,
      rule: [{ required: true, message: 'please input user name', trigger: 'blur' }],
      id: '',
    },
    {
      label: 'password',
      default: '',
      required: true,
      rule: [
        { required: true, message: 'please input password', trigger: 'blur' },
        { validator: formChecker.easyPasswordChecker(), trigger: 'blur' },
      ],
      id: '',
    },
  ]
}
export const loginFormAndRule = createFormAndRule()

// login.vue
import { loginFormAndRule } from './records'
import { generateFormAndRules } from 'ivy2'
const [ _form, _rules ] = generateFormAndRules(
  ['username', 'password'],
  loginFormAndRule
)

const loginForm = reactive(_form)
const loginFormRules = reactive(_rules)
// The first parameter of generateFormAndRules is an array of strings consisting of the field names of the form
// The generated loginForm and loginFormRules are responsive data conforming to element-ui plus

🥇 tools:

🐻 Determine if it is of a certain type (type predicate)

isString
isNumber
isBoolean
isArray
isPlainObject
isDate
isRegExp
isWindow
isElement
isMap
isServer - is server-side
isFunction
isUrl
isEmpty - is an empty array | an empty string | an empty Map | an empty Set | an empty object
isDef - is undefined
isUnDef - is not undefined
isNullOrUnDef - is undefined or null
isPromise
isHexColor - is hex color value
getTypeOfValue - the type of the return parameter

😽 Regular check expression
Instance methods of the Pattern class:

testIdCardNo - ID rule detection
testCn - Check if it is Chinese
testMobile - Mobile number detection
testEmail - Mailbox detection
testUrl - URL detection
testCarId - License plate detection
testDate - Check if the input is a date
testHKMc - Hong Kong and Macau Pass Testing
testTaiWan - Taiwan Pass Inspection
testPassport - Passport detection
testNum - Integer detection
testDecimal - Check for decimals
testTwCome - Taiwan compatriot certificate test
testHmHid - Residence Permit for Hong Kong, Macao and Taiwan Residents

testEmoji - Check if the string contains emoji expressions example:

import { pattern } from 'ivy2'
const isTaiWan = pattern.testTaiWan('123456')
const isDate = pattern.testDate('123456')

🐉 others:

debounce - Create a debounced function, same as lodash
throttle - Create a throttle function, same as lodash
cloneDeep - deep copy, same as lodash
omit - Creates an object consisting of properties other than ignored properties, same as lodash
pick - Creates an object consisting of selected properties from object, same as lodash
random - Produces a number between lower and upper, or a number between 0 and the supplied number if only one argument is supplied. same as lodash
_console - Predefined four console.log colors
scrollToTop - The scroll bar of the specified container scrolls back to the top smoothly
autoImport - When the project adopts wepack, use this method to automatically import js or ts files or style files in a certain directory
loadScript - Add script files in the head of html in the way of promise
pollingAction - Define a polling method
getPropValue - Returns the value of the specified object property
deepMerge - deep merge
setObjToUrlParams - Serialize object to string and append to url
randomHexColorCode - Generate random hex color codes
hexToRGB - Convert hexadecimal color to rgb color
RGBToHex - Convert rgb color to hexadecimal color
toThousands - Convert rgb color to hexadecimal color
arrScrambling - shuffle (shuffle the order)
randomString - Generate random string of specified length
fistLetterUpper - Capitalize the first letter of the string
strToAsterisk - Replace the specified interval characters in the middle of the string with the specified string (the default is to replace the middle 4 digits of the mobile phone number with)
chineseMoney - Convert numbers to Chinese capitalized amounts
toFullScreen - Open browser full screen
exitFullscreen - Exit browser full screen
openWindow - Open a new browser form
approximatelyEqual - Checks if two numbers are approximately equal to each other
sleep - js implementation of sleep function
getBrowserInfo - Get browser information

🎯 data manipulate

pickDuplicate - Find the index of duplicate values in an array
getDepth - Get the maximum depth of the array (that is, get the dimension of the array. Because they are at least one-dimensional arrays, deep defaults to 1)
arrayToObject - Convert the array to the response object by the specified key
getUrlQuery - Get the query object in the current URL