(iv) These five wheels are actually five plug-ins implemented in pure js. They are excellent. Here are some tips for you.

Async-validator

By default, url and email validation are integrated to support asynchronous validation. element-ui and iview form components are validation functions implemented by him.

import schema from 'async-validator';
// Is the value of the monitored object'name'field 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) {
    return handleErrors(errors, fields);
  }
});

https://github.com/yiminghe/a...

Plus: Looking at the author's github, the author should be an employee of Ali and a code maintainer of ant design.

Moment | day. JS (operation time)

ant design DatePicker Used in components moment.

moment Because of historical compatibility, the volume is relatively large. Now I suggest you use it. day.js Instead of him, they are similar in grammar.

dayjs('2018-08-08') // Resolution string

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

dayjs().add(1, 'year') // The current year is increased by one year.

dayjs().isBefore(dayjs()) // compare

Popover

element-ui and iview tooltip and popover Components are all based on vue-popover, and vue-popover is just for popper The core of the bubble dialog is to make a layer of vue encapsulation. popper.

<div class="my-button">Button</div>
<div class="my-popper">Bubble menu</div>

var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var popperInstance = new Popper(reference, popper, {
  // More settings
});

Autosize (let textarea vary in height with line breaks)

textarea of vux Use autosize to change the height of the textarea component as the input text changes lines.

// In one line, it implements "textarea changes in height as input text changes lines"
autosize(document.querySelector('textarea'));

Resize-observer-polyfill (compatible patch for Resize Observer API)

Almost all ui component libraries are in use, so that low-level browsers also support the Resize Observer API, so that we can safely monitor the size changes of elements.

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);

Last

Learned a lot of component library source code, based on the enthusiasm for writing code, I used ts to write two small plug-ins, abstracted some components of repetitive code, you see if you need.

any-touch

(iv) A gesture Library It supports tap (click) / press (press) / PAN (drag) / swipe (scratch) / pinch (pinch) / rotate (rotation) six kinds of gestures, and supports mouse and touch screen.

Online demo

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

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

Tap (click)

Used to solve the "click 300ms delay problem" on the mobile side, and support the "double-click" event through setting.

Press (press)

Used to trigger custom menus.

Pan (drag and drop)

This should be the most commonly used gesture in component libraries. Carousel / drawer / scroll / tabs all require drag and drop recognition.

Swipe (slide)

carousel/tabs switch to the next one, scroll fast sliding, etc.

Pinch / rotate

pinch is used to scale merchandise pictures, rotate is usually used for advanced customization functions, such as lettering pictures (merchandise) and rotating text.

(iv) More information: https://github.com/any86/any-touch

vue-create-root

Less than 1kb of gadgets, 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 <body>.
        this.$createRoot(UCom, {props: {value:'hello vue!'}});
        // Or abbreviated as:
        this.$createRoot(UCom, {value:'hello vue!'});
    }
}

(iv) More information: https://github.com/any86/vue-create-root

WeChat group

Thank you for your reading. If you have any questions, please send me a Wechat. I'll pull you into the Wechat Group (because Tencent restricts 100 people in the Wechat Group, after more than 100 people, I must pull you in).