1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/wocwin-t-ui

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README.md 12 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
Отправлено 10.03.2025 13:16 76bbee4

T-ui

Vue3 базовые компоненты

Базовые компоненты, переопределенные на основе Element-plus

Пример использования T-ui

wocwin-vue2 — это открытое решение для создания административной панели на основе Vue2, Vuex и webpack; в этом проекте используются переопределённые базовые компоненты T-ui.

Описание

Базовые компоненты, переопределенные на основе Element-ui.

Это мои работы по переопределению базовых компонентов на основе Element-ui; надеюсь, что они будут полезны вам. Подробнее можно посмотреть в документации с примерами

vue t-ui t-ui npm

Разделение компонентов, основанных на ant-design-vue (версия 1.1.2)

Vue2 компоненты, основанные на ant-design-vue

Динамическое представление

Установка и использование через npm

Предварительные условия: проект должен глобально использовать библиотеку компонентов Element-ui```js

// Установите пакет npm i @wocwin/t-ui // 1. В main.js выполните следующую команду для глобального использования import Tui from '@wocwin/t-ui' Vue.use(Tui)

// 2. Для выборочной установки выполните следующие шаги в одном vue-файле или в main.js import { TTable, TLayoutPage, TLayoutPageItem, TForm, TQueryCondition } from '@wocwin/t-ui'


## Копирование папки packages для глобального использования

```js
// 1. Скопируйте папку packages в ваш проект
// 2. Предположим, что папки packages и src находятся на одном уровне, тогда в main.js выполните следующий код для глобального использования t-ui
import Tui from '../packages'
Vue.use(Tui)

Внедрение через CDN (версия v1.3.0 поддерживается) -- рекомендовано использовать npm```html

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/@wocwin/t-ui@latest"></script> <script> new Vue({ el: '#app', data() { return { selectValue: null, stepList: [ { label: 'Start', id: 1 }, { label: 'POSUI', id: 2 }, { label: '11', id: 3 }, { label: 'GX123', id: 4 }, { label: 'Drying and destruction', id: 5 }, { label: 'Workshop and warehouse', id: 6 }, { label: 'ui3333', id: 7 }, { label: 'hhh333', id: 8 }] } }, methods: { // Selection change handler selectChange(val) { console.log('selectChange', val, this.selectValue) } } }) </script> ``

All Components| Название компонента | Описание |

| :------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | TLayoutPage | COMPONENT_LAYOUT_PAGE | | TLayoutPageItem | Подкомпонент COMPONENT_LAYOUT_PAGE | | TAdaptivePage | Компонент одной страницы (наследует все свойства, события, слоты и методы от компонентов TTable и TQueryCondition) | | TQueryCondition | Компонент условий запроса | | TTable | Таблица | | TForm | Форма | | TSelectTable | Компонент выпадающего списка таблиц | | TSelect | Компонент выпадающего списка | | TDetail | Компонент деталей | | TButton | Компонент кнопки с debounce |

Замечено, что "LAYOUT_PAGE" было заменено на "COMPONENT_LAYOUT_PAGE". Это сделано для более точной передачи смысла, поскольку "LAYOUT_PAGE" может быть интерпретировано как просто название, тогда как "COMPONENT_LAYOUT_PAGE" указывает на то, что это конкретный компонент.| TStepWizard | Компонент шагов || | TModuleForm | Компонент модульной формы/деталей | | TDatePicker | Компонент выбора даты | | TInput | Компонент input | | TDialog | Компонент диалогового окна | | TTreeSelect | Компонент выпадающего дерева |

Установка зависимостей```shell

npm install

версия Node.js меньше 16 версия Node.js больше 16: требуется добавление команды "SET NODE_OPTIONS=--openssl-legacy-provider" в раздел scripts файла package.json


## Локальный запуск примеров компонентов из папки src

```shell
npm run serve

Локальный запуск документации компонентов из папки vuepress

npm run docs:dev

Благодарность всем вкладчикам

вкладчики

Группа общения в WeChat

В настоящее время количество участников группы WeChat превышает 200 человек, поэтому для добавления в группу необходимо добавиться в друзья в WeChat (пожалуйста, укажите T-ui в качестве причины).

Код QR WeChat

Нормы коммитов в Git

  • ci: изменения конфигурационных файлов CI и скриптов;
  • chore: изменения систем сборки или вспомогательных инструментов;
  • fix: исправление ошибок в коде;
  • feat: добавление новых функций;
  • perf: оптимизация производительности;
  • refactor: изменения в коде, которые не являются исправлением ошибок или добавлением новой функциональности;
  • style: корректировка формата кода, такие как пробелы, точки с запятой, отступы и т.д.;
  • docs: изменения в документации;
  • test: добавление недостающих тестовых случаев или исправление существующих тестовых случаев;
  • revert: откат изменений;

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/wocwin-t-ui.git
git@api.gitlife.ru:oschina-mirror/wocwin-t-ui.git
oschina-mirror
wocwin-t-ui
wocwin-t-ui
dev