vue amazing ui
1.0.0
Удивительный интерфейс Vue
Библиотека компонентов реализована с помощью [email protected] + [email protected] + [email protected] + [email protected] .
В настоящее время он включает в себя 63 базовых компонента пользовательского интерфейса и 16 служебных функций, которые постоянно изучаются и обновляются...
Более того, их всех можно трясти деревьями.
Все в Vue Amazing UI написано на TypeScript. Он может легко работать с вашим проектом машинописного текста.
Все компоненты построены в стиле SFC в виде одного файла и могут использоваться независимо.
Готов к использованию прямо из коробки, без суеты.
pnpm добавить vue-amazing-ui# ornpm install vue-amazing-ui# oryarn добавить vue-amazing-ui# orbun добавить vue-amazing-ui#
Глобальная регистрация всех компонентов (не рекомендуется)
Никакого тряски дерева. В комплекте будут избыточные коды.
import { createApp } из 'vue'import App from './App.vue'import VueAmazingUI из 'vue-amazing-ui'import 'vue-amazing-ui/css'const app = createApp(App)app.use(VueAmazingUI )app.mount('#app')Глобальная частичная регистрация
В этой форме будут объединены только импортированные компоненты.
import { createApp } from 'vue'import App from './App.vue'import { Button, Tag } from 'vue-amazing-ui'import 'vue-amazing-ui/es/button/Button.css'import ' vue-amazing-ui/es/tag/Tag.css'const app = createApp(App)app.use(Button).use(Tag)app.mount('#app')Местная регистрация
В этой форме будут объединены только импортированные компоненты.
<script setup lang="ts">import { Button, Tag } из 'vue-amazing-ui'import 'vue-amazing-ui/es/button/Button.css'import 'vue-amazing-ui/es/tag /Tag.css'</script>
<шаблон>
<Button>кнопка</Button>
<Tag>тег</Tag>
</шаблон>Стили автоматического импорта (рекомендуется)
Используйте плагин vite-plugin-style-import для автоматического импорта стилей компонентов по требованию. Плагин автоматически разберет используемые компоненты в шаблоне и импортирует их стили.
pnpm add vite-plugin-style-import -D# ornpm install vite-plugin-style-import -D# oryarn add vite-plugin-style-import -D# orbun add vite-plugin-style-import -D
// vite.config.tsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { createStyleImportPlugin } from 'vite-plugin-style-import'// Автоматически импортировать компоненты Stylesimport { VueAmazingUIStyleResolve } из ' vue-amazing-ui'// https://vitejs.dev/config/export по умолчанию defineConfig({
плагины: [vue(), // импортирует стили библиотеки компонентов по требованиюcreateStyleImportPlugin({solves:[VueAmazingUIStyleResolve() ]})
]}) Затем вы сможете использовать все компоненты vue-amazing-ui в своем коде без необходимости вручную импортировать стили компонентов, независимо от того, используете ли вы глобальную частичную регистрацию или локальную регистрацию.
Глобальная частичная регистрация
import { createApp } из 'vue'import App из './App.vue'import { Button, Tag } из 'vue-amazing-ui'const app = createApp(App)app.use(Button).use(Tag) app.mount('#приложение')Местная регистрация
<script setup lang="ts">импортировать { Button, Tag } из 'vue-amazing-ui'</script>
<шаблон>
<Button>кнопка</Button>
<Tag>тег</Tag>
</шаблон>Автоматический импорт по требованию (настоятельно рекомендуется)
Используйте плагин unplugin-vue-components для автоматического импорта компонентов по требованию. Плагин автоматически проанализирует компоненты, используемые в шаблоне, и импортирует компоненты и стили.
pnpm добавить компоненты unplugin-vue -D# ornpm установить компоненты unplugin-vue -D# oryarn добавить компоненты unplugin-vue -D# orbun добавить компоненты unplugin-vue -D
// vite.config.tsimport { defineConfig } из 'vite'import vue из '@vitejs/plugin-vue'import Компоненты из 'unplugin-vue-comComponents/vite'// vue-amazing-ui on-demand importimport { VueAmazingUIResolver } из 'vue-amazing-ui'// https://vitejs.dev/config/export default defineConfig({
плагины: [vue(),Components({solvers: [// автоматический импорт компонентов из VueAmazingUIVueAmazingUIResolver() ]})
]}) Затем вы можете напрямую использовать все компоненты vue-amazing-ui в своем коде.
<шаблон> <Button>кнопка</Button> <Tag>тег</Tag> </шаблон>
Все типы можно напрямую импортировать и использовать из vue-amazing-ui без какой-либо дополнительной установки.
<script setup lang="ts">тип импорта { ButtonProps } из 'vue-amazing-ui'const shape = ref<ButtonProps['shape']>('default')</script>
<шаблон>
<Button :shape="shape">кнопка</Button>
</шаблон> <script setup lang="ts">import { dateFormat, formatNumber, rafTimeout, cancelRaf, throttle, debounce, add, downloadFile, toggleDark, useEventListener, useMutationObserver, useScroll, useFps, useMediaQuery, useResizeObserver, useSlotsExist} из 'vue-amazing-ui '</скрипт>Получить код проекта
git-клон https://github.com/themusecatcher/vue-amazing-ui.git
Установить зависимости
CD Vue-Amazing-UI пнпм я
Запустить проект
pnpm разработчик
Мои блоги CSDN
| Имя | Описание | Имя | Описание |
|---|---|---|---|
| Тревога | 警告提示 | Аватар | 头像 |
| НазадВверх | 回到顶部 | Значок | 徽标 |
| хлебные крошки | 面包屑 | Кнопка | 按钮 |
| Карта | фото | Карусель | 轮播图 |
| Каскадер | 级联选择 | Флажок | 复选框 |
| Крах | 折叠面板 | Обратный отсчет | 倒计时 |
| DatePicker | 日期选择 | Описания | 描述列表 |
| Диалог | 对话框 | Разделитель | 分割线 |
| Ящик | 抽屉 | Эллипсис | 文本省略 |
| Пустой | 空状态 | Гибкий | 弹性布局 |
| ФлоатКнопка | 浮动按钮 | Градиенттекст | 渐变文字 |
| Сетка | 栅格 | Изображение | фото |
| Вход | 输入框 | Входной номер | 数字输入框 |
| Входной поиск | 搜索框 | Список | 列表 |
| Загрузкабар | 加载条 | Сообщение | 全局提示 |
| Модальный | 模态框 | Уведомление | 通知提醒 |
| НомерАнимация | 数值动画 | Пагинация | 分页 |
| Попподтвердить | 弹出确认 | Поповер | 气泡卡фото |
| Прогресс | 进度条 | QRCод | 二维码 |
| Радио | 单选框 | Ставка | 评分 |
| Результат | 结果 | Полоса прокрутки | 滚动条 |
| Сегментированный | 分段控制器 | Выбирать | 选择器 |
| Скелет | 骨架屏 | Слайдер | 滑动输入条 |
| Космос | 间距 | Вращаться | 加载中 |
| Статистика | 统计数值 | Шаги | 步骤条 |
| Свипер | 触摸滑动插件 | Выключатель | 开关 |
| Стол | 表格 | Вкладки | 标签页 |
| Ярлык | 标签 | Текстовая область | 文本域 |
| ТекстПрокрутка | 文字滚动 | Хронология | 时间轴 |
| Подсказка | 文字提示 | Загрузить | 上传 |
| Видео | 播放器 | Водопад | 瀑布流 |
| Водяной знак | 水印 |
| Имя | Описание | Тип |
|---|---|---|
| формат даты | Строковая функция формата даты и времени | (значение: число | строка | Дата = Date.now(), формат: строка = 'ГГГГ-ММ-ДД ЧЧ:мм:сс') => строка |
| форматномер | Функция форматирования чисел | (значение: число | строка, точность: число = 2, разделитель: строка = ',', десятичное число: строка = '.', префикс?: строка, суффикс?: строка) => строка |
| рафТаймаут | Функция для реализации setTimeout или setInterval с использованием requestAnimationFrame | (fn: функция, задержка: число = 0, интервал: логическое значение = ложь) => объект |
| отменитьРаф | Функция отмены функции rafTimeout | (raf: { id: номер }) => void |
| дроссель | Функция дроссельной заслонки | (fn: Функция, задержка: число = 300) => любое |
| отскакивать | Функция устранения дребезга | (fn: Функция, задержка: число = 300) => любое |
| добавлять | Функция сложения, которая устраняет проблемы с точностью в арифметике JavaScript. | (число1: число, число2: число) => число |
| скачатьФайл | Функция загрузки файла с произвольным именем файла; если имя не указано, оно извлекает имя файла из URL-адреса | (url: строка, имя_файла?: строка) => void |
| toggleDark | Функция переключения темного режима | () => недействительно |
| использоватьEventListener | Функция для добавления и удаления прослушивателей событий с помощью перехватчиков жизненного цикла Vue | (цель: HTMLElement | Window | Document, событие: строка, обратный вызов: функция) => void |
| использоватьMutationObserver | Функция для наблюдения за изменениями в элементах DOM с помощью MutationObserver | (цель: Ref | Ref[] | HTMLElement | HTMLElement[], обратный вызов: MutationCallback, options = {}) => объект |
| использоватьПрокрутка | Функция для мониторинга положения прокрутки и состояния целевого элемента в режиме реального времени. | (цель: Ref | HTMLElement | Window | Document = window, throttleDelay: число = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => объект |
| использоватьFps | Функция для мониторинга частоты обновления браузера (FPS) в режиме реального времени. | () => объект |
| использоватьMediaQuery | Функция, позволяющая определить, соответствует ли текущая среда указанному условию медиа-запроса. | (mediaQuery: строка) => объект |
| использоватьResizeObserver | Функция для наблюдения за изменениями размеров элементов DOM с помощью ResizeObserver | (цель: Ref | Ref[] | HTMLElement | HTMLElement[], обратный вызов: ResizeObserverCallback, options = {}) => объект |
| использоватьSlotsExist | Функция для отслеживания существования слотов с заданными именами, поддерживающая отдельные слоты или массив слотов. | (slotsName: string | string[] = 'default') => Реактивный | Ссылка<логическое значение> |
