🚀 These five wheels are actually 5 pure JS plug-ins, are very good, one by one to reveal to you.

Async-validator (Data validation tool)

Url and email validation are integrated by default, and asynchronous validation is supported. Elemental-ui and iView form components are used for validation.

import schema from 'async-validator';
// Monitor whether the value of the 'name' field is equal to muji and must exist
var descriptor = {
  name: {
    type: "string".required: true.validator: (rule, value) = > value === 'muji',}};var validator = new schema(descriptor);
validator.validate({name: "muji"}, (errors, fields) = > {
  if(errors) {
    returnhandleErrors(errors, fields); }});Copy the code

Github.com/yiminghe/as…

Add: I have seen the author’s Github, the author should be an employee of Ali and also the code maintainer of Ant Design.

Moment | day. Js (operation time)

Ant Design uses Moment in the DatePicker component.

Moment is quite large for historical compatibility reasons, so I suggest you use day.js instead, which has similar syntax.

dayjs('2018-08-08') // Parse the string

dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // Format the date

dayjs().add(1.'year') // Add one year to the current year

dayjs().isBefore(dayjs()) / / to compare
Copy the code

Popover (Bubble dialog box)

The Tooltip and popover components of Element-UI and iView are implemented based on vue-Popover, and Vue-Popover is just a vUE wrapper around popper, so the core of the bubble dialog is popper.

<div class="my-button">button</div>
<div class="my-popper">Bubble menu</div>
Copy the code
var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var popperInstance = new Popper(reference, popper, {
  // More Settings
});
Copy the code

Autosize (let the textarea change height as the text wraps)

Vux’s Textarea uses autosize to make the Textarea component height change as the input text wraps.

// The textarea changes height as the input text breaks.
autosize(document.querySelector('textarea'));
Copy the code

Resize – Observer-Polyfill (Compatible patch for resize Observer API)

Basically all the UI component libraries are in use, and the Resize Observer API is supported in older browsers as well, so that we can monitor the size changes of elements with confidence.

import ResizeObserver from 'resize-observer-polyfill';
const ro = new ResizeObserver((entries, observer) = > {
    for (const entry of entries) {
        const {left, top, width, height} = entry.contentRect;
        console.log('Element:', entry.target);
        console.log(`Element's size: ${ width }px x ${ height }px`);
        console.log(`Element's paddings: ${ top }px ; ${ left }px`); }}); ro.observe(document.body);
Copy the code

The last

Learned a lot of component library source code, based on the enthusiasm of writing code, I wrote two small plug-ins with TS, abstract some components of the repeated code, we see whether it is needed.

any-touch

👋 A gesture library that supports tap, press, pan, swipe, pinch, and rotate. It also supports mouse and touch screen gestures.

The online demo

import AnyTouch from "any-touch";
const el = doucument.getElementById("box");
const at = new AnyTouch(el);

at.on("pan".ev= > {
  // Drag trigger.
});
Copy the code

The tap (click)

To solve the “300ms delay problem for click” on mobile, and support the “double click” event by setting it.

Press (by)

Used to trigger custom menus.

Pan (drag)

This is probably the most commonly used gesture in component libraries, carousel, drawer, scroll, tabs, etc.

Swipe (slide)

Carousel /tabs switch next scroll fast slide, etc.

Pinch/rotate

Pinch is used to zoom in on an image, and rotate is used for advanced customization functions, such as engraving images and rotating text.

🚀 more details: https://github.com/any86/any-touch

vue-create-root

🍭 less than 1KB gadget to turn vue components into commands like this.$XXX.

// main.js
Vue.use(createRoot);

// xxx.vue
import UCom from '.. /UCom.vue';
{
    mounted(){
        // The default component is inserted at the end of 
        this.$createRoot(UCom, {props: {value:'hello vue! '}});
        // Or simply:
        this.$createRoot(UCom, {value:'hello vue! '}); }}Copy the code

🚀 more details: https://github.com/any86/vue-create-root

WeChat group

Thank you for your reading. If you have any questions, please add me to the wechat group, and I will pull you into the wechat group (Because Tencent limits the number of wechat groups to 100, I will pull you into the wechat group when the number exceeds 100).