🚀Раскройте 🤚5 "колес, сделанных не автором" в библиотеке компонентов vue/react

JavaScript

🚀 Эти пять колес на самом деле представляют собой 5 плагинов, реализованных на чистом js, и все они очень хороши.

async-validator (инструмент проверки данных)

интегрировано по умолчаниюurlа такжеemailпроверить, поддержатьАсинхронная проверка. элемент-интерфейс и iviewКомпоненты формы — это все реализованные им функции проверки.

import schema from 'async-validator';
// 监视对象'name'字段的值是否等于muji, 且必须存在
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);
  }
});

GitHub.com/один и/как…

Пополнить: После прочтения гитхаба автора автор должен быть сотрудником Али, а также мейнтейнером кода ant design.

Момент|day.js (наработка)

дизайн муравья вDatePickerиспользуемый компонентmoment.

momentИз-за исторических причин совместимости объем относительно велик, и теперь рекомендуется использоватьday.jsВместо него эти два грамматически похожи.

dayjs('2018-08-08') // 解析字符串

dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // 格式化日期

dayjs().add(1, 'year') // 当前年份增加一年

dayjs().isBefore(dayjs()) // 比较

всплывающее окно (пузырьковый диалог)

элемент-интерфейс и iviewизвсплывающая подсказка и всплывающее окноКомпоненты реализованы на основе vue-popover, а vue-popover предназначен только дляpopperСделал слой инкапсуляции vue, поэтому ядро ​​​​пузырькового диалогаpopper.

<div class="my-button">按钮</div>
<div class="my-popper">气泡菜单</div>

var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var popperInstance = new Popper(reference, popper, {
  // 更多设置
});

автоматический размер (пусть текстовое поле меняет высоту по мере переноса текста)

текстовое поле vuxИспользуйте авторазмер, чтобы изменить высоту компонента textarea по мере переноса вводимого текста.

// 就一行, 就实现了"textarea随着输入文字换行而变化高度"
autosize(document.querySelector('textarea'));

Resize-Observer-Polyfill (размер совместимости API наблюдателя)

Используются все основные библиотеки компонентов пользовательского интерфейса, так что браузеры младших версий также поддерживают API Resize Observer, поэтому мы можем безопасно изменять размер элементов монитора.

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

наконец

Я изучил исходный код многих библиотек компонентов.Основываясь на моей страсти к написанию кода, я написал 2 небольших плагина с ts, которые абстрагируют повторяющийся код в некоторых компонентах.Посмотрим, нужно ли вам это.

any-touch

👋 Библиотека жестов, служба поддержкиtap(щелкнуть) /press(согласно с) /pan(Тянуть) /swipe(Рисовать) /pinch(замешивание) /rotate(Вращение) 6 категорий жестов, поддержка как мыши, так и сенсорного экрана.

онлайн демо

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

at.on("pan", ev => {
  // 拖拽触发.
});

коснуться (щелкнуть)

Он используется для решения «проблемы задержки щелчка в 300 мс» на мобильном терминале и поддерживает событие «двойной щелчок» путем настройки.

нажать (нажать)

Используется для запуска пользовательских меню.

панорамирование (перетаскивание)

Это должен быть наиболее часто используемый жест в библиотеке компонентов, карусель (карусель)/ящик (ящик)/прокрутка (скольжение)/вкладки (вкладки) и т. д. все требуют «распознавания перетаскивания»

смахнуть (скользнуть)

Карусель/вкладки переключаются на следующую картинку, быстро прокручиваются и т. д.

зажать (зажать) / повернуть (повернуть)

щипок используется для увеличения изображения продукта, а поворот обычно используется для расширенных функций настройки, таких как поворот текста после гравировки изображения (продукта).

🚀 Дополнительные инструкции: https://github.com/any86/any-touch

vue-create-root

🍭 Гаджет размером менее 1 КБ, превратите компонент vue в команду, подобную этой $xxx.

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

// xxx.vue
import UCom from '../UCom.vue';
{
    mounted(){
        // 默认组件被插入到<body>尾部
        this.$createRoot(UCom, {props: {value:'hello vue!'}});
        // 或者简写为:
        this.$createRoot(UCom, {value:'hello vue!'});
    }
}

🚀 Дополнительные инструкции: https://github.com/any86/vue-create-root

Группа WeChat

Спасибо за чтение, если у вас есть какие-либо вопросы, вы можете добавить меня в WeChat, я приглашу васГруппа WeChat(Из-за ограничения Tencent на 100 человек в группах WeChat я должен зайти после более чем 100 человек)

Категории