Библиотека компонентов Vue3 с открытым исходным кодом: обычный интерфейс

внешний интерфейс
Библиотека компонентов Vue3 с открытым исходным кодом: обычный интерфейс

Обзор

Всем привет, я peryl, и сегодня я представляю вам свою личную библиотеку компонентов Vue3.0 с открытым исходным кодом:plain-ui;Не говори глупостей, иди прямо к таланту;

theme01.png

theme_02.png

theme_03.png

theme_04.png

theme_05.png

theme_06.png

характеристика

  • поддержка вvue-cli,viteЕго можно установить и использовать непосредственно в других проектах, он поддерживает статическую конструкцию (введение нескольких файлов js и css в статический HTML-файл) и импорт компонентов по требованию;
  • Когда компоненты вводятся по запросу или создаются на основе исходного кода (настройте псевдоним plain-ui, указывающий на node_modules/plain-ui/src/index), значки можно загружать по требованию;
  • Документ поддерживает онлайн-отладку и может быть открыт очень быстро, не переворачивая стену. Что видите, то и получаете, все примеры в документе генерируются на основе их отлаженного кода, и не будет несоответствия между примерами и отлаженным исходным кодом;
  • Все компоненты используютсяCompositionApi + Typescript + JSXРеализация не содержит неявного типа any, если учащиеся используют разработку Vue и заинтересованы в углубленном использовании любого из этих навыков, тоplain-uiКомпоненты являются отличными объектами обучения;
  • Легкий, менее 200 КБ после сжатия gzip, css всего 50 КБ после сжатия gzip;
  • Мощный компонент даты, поддерживает шесть представлений года, года, месяца, года, месяца, дня, года, месяца, дня, недели и квартала, и каждое представление поддерживает выбор радио, выбор диапазона и ограниченное максимальное и минимальное время, за исключением год, месяц, дневное время Кроме того, другие представления поддерживают множественный выбор.
  • Мощный компонент дерева, поддерживает одиночный выбор, множественный выбор, ленивую загрузку, виртуальную прокрутку и перетаскивание, а также имеет собственную оптимизацию стиля полосы прокрутки;
  • Мощные базовые табличные компоненты: поддержка заголовков групп, фиксированные заголовки и столбцы, настраиваемый контент в слотах областей, развертывание столбцов, древовидные таблицы (со всеми функциями древовидных компонентов), сортировка перетаскиванием строк, сортировка перетаскиванием столбцов, объединение строк и столбцов, виртуальная прокрутка , встроенное редактирование, проверка формы и другие функции, а также оптимизация стиля полосы прокрутки;

Наконец, ядро ​​библиотеки компонентов: редактируемая таблица - PlTablePro, PlTablePro - это бизнес-таблица с комплексными бизнес-возможностями. Цель состоит в том, чтобы выполнять мощные бизнес-функции с небольшим объемом информации о конфигурации в ежедневной разработке. Конкретные функциональные характеристики заключаются в следующем. Показывать:

  • Редактирование: функции добавления, удаления и изменения данных таблицы, включая редактирование таблиц в режиме реального времени, многострочное редактирование (пакетная отправка), редактирование форм (автоматическое создание всплывающих форм), пакетное изменение (выбор полей для изменения и пакетное изменение). строк) и пакетное удаление;
  • Фильтрация: панель поиска, форма фильтра, поиск по столбцу, фильтр дедупликации, расширенный фильтр и фильтр с пользовательским выражением;
  • Сортировка: сортировка по одному полю и комбинированная сортировка по нескольким полям;
  • Персонализация: изменение основной информации о столбце, такой как имя столбца, ширина, фиксированность столбца, необходимость скрытия, порядок столбцов и т. д.;
  • Кэш конфигурации: локально кеширует текущие параметры фильтрации и персональные настройки, которые можно переключать по желанию;
  • Импорт и экспорт данных;
  • Богатые редактируемые столбцы, в настоящее время существующие столбцы включают: столбец поля ввода, столбец связи провинции, города и округа, столбец флажка, столбец цвета, столбец даты, столбец рейтинга, столбец изображения, столбец числа, столбец выбора объекта, раскрывающийся столбец, текстовое поле столбцы, переключатели столбцов и т. д.;
  • Богатая поддержка сочетаний клавиш;

разное

  • Поскольку это личная библиотека компонентов с открытым исходным кодом, она не требует больших объемов производства, поэтому не возлагайте на нее слишком больших надежд;
  • Основной целью разработки библиотеки компонентов является непрерывное обучение, и большинство компонентов являются оригинальными. Оригинал означает, что идея дизайна или исходный код реализации являются оригинальными, но использование API компонента в большинстве случаев будет ссылаться на существующую библиотеку компонентов, например атрибуты и события некоторых компонентов.ElementUI,Ant DesignИ так далее, в основном для снижения стоимости обучения разработчиков;
  • В настоящее время стиль библиотеки компонентов является относительно плохой частью, главным образом потому, что в ней мало переменных, а стиль компонентов также прост. Я потрачу деньги на редизайн пользовательского интерфейса после того, как редактор подрастет. —_—!
  • В настоящее время по-прежнему отсутствует функция многоязычной интернационализации, которая относится к физическому труду и будет восполнена, когда в будущем будет время;

Наконец, соответствующий адрес ссылки прилагается:

Категории