vue amazing ui

Vue Erstaunliche Benutzeroberfläche

Dokumentation

Vue Erstaunliche Benutzeroberfläche

Merkmale

• Die Komponentenbibliothek ist mit [email protected] + [email protected] + [email protected] + [email protected] implementiert.

• Derzeit umfasst es 63 grundlegende UI-Komponenten und 16 Hilfsfunktionen, die fortlaufend erkundet und aktualisiert werden ...

• Darüber hinaus sind sie alle baumschüttelnd.

• Der gesamte Inhalt der Vue Amazing UI ist in TypeScript geschrieben. Es kann nahtlos mit Ihrem Typoskript-Projekt zusammenarbeiten.

• Alle Komponenten sind im SFC Stil für einzelne Dateikomponenten erstellt und können unabhängig voneinander verwendet werden.

• Sofort einsatzbereit, ohne großen Aufwand.

Installation

 pnpm vue-amazing-ui# hinzufügen ornpm vue-amazing-ui# installieren oryarn vue-amazing-ui# hinzufügen orbun vue-amazing-ui hinzufügen

Verwenden Sie Komponenten

Globale Registrierung aller Komponenten (nicht empfohlen)

Kein Baumrütteln. Das Bundle enthält redundante Codes.

 import { createApp } from 'vue'import App from './App.vue'import VueAmazingUI from 'vue-amazing-ui'import 'vue-amazing-ui/css'const app = createApp(App)app.use(VueAmazingUI )app.mount('#app')

Globale Teilregistrierung

In dieser Form werden nur importierte Komponenten gebündelt.

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

Lokale Registrierung

In dieser Form werden nur importierte Komponenten gebündelt.

 <script setup lang="ts">import { Button, Tag } from 'vue-amazing-ui'import 'vue-amazing-ui/es/button/Button.css'import 'vue-amazing-ui/es/tag /Tag.css'</script>
<Vorlage>
  <Button>Schaltfläche</Button>
  <Tag>Tag</Tag>
</template>

Stile automatisch importieren (empfohlen)

Verwenden Sie das Plugin vite-plugin-style-import um Komponentenstile bei Bedarf automatisch zu importieren. Das Plugin analysiert automatisch die verwendeten Komponenten in der Vorlage und importiert ihre Stile.

 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'// Komponenten-Stylesimport { VueAmazingUIStyleResolve } from ' automatisch importieren vue-amazing-ui'// https://vitejs.dev/config/export default defineConfig({
  Plugins: [vue(),// importiert Komponentenbibliotheksstile bei BedarfcreateStyleImportPlugin({ löst:[VueAmazingUIStyleResolve() ]})
  ]})

Anschließend können Sie alle Komponenten von vue-amazing-ui in Ihrem Code verwenden, ohne Komponentenstile manuell importieren zu müssen, unabhängig davon, ob Sie die globale Teilregistrierung oder die lokale Registrierung verwenden.

• Globale Teilregistrierung

   import { createApp } from 'vue'import App from './App.vue'import { Button, Tag } from 'vue-amazing-ui'const app = createApp(App)app.use(Button).use(Tag) app.mount('#app')

• Lokale Registrierung

   <script setup lang="ts">{ Button, Tag } aus 'vue-amazing-ui' importieren</script>
  <Vorlage>
    <Button>Schaltfläche</Button>
    <Tag>Tag</Tag>
  </template>

Automatischer On-Demand-Import (dringend empfohlen)

Verwenden Sie das Plugin unplugin-vue-components , um Komponenten bei Bedarf automatisch zu importieren. Das Plugin analysiert automatisch die in der Vorlage verwendeten Komponenten und importiert die Komponenten und Stile.

 pnpm add unplugin-vue-components -D# ornpm install unplugin-vue-components -D# oryarn add unplugin-vue-components -D# orbun add unplugin-vue-components -D

 // vite.config.tsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import Components from 'unplugin-vue-components/vite'// vue-amazing-ui on-demand importimport { VueAmazingUIResolver } von 'vue-amazing-ui'// https://vitejs.dev/config/export default defineConfig({
  Plugins: [vue(),Components({ Resolver: [// Komponenten automatisch aus VueAmazingUIVueAmazingUIResolver() importieren]})
  ]})

Anschließend können Sie alle Komponenten von vue-amazing-ui direkt in Ihrem Code verwenden.

 <Vorlage>
  <Button>Schaltfläche</Button>
  <Tag>Tag</Tag>
</template>

Verwenden Sie Typen

Alle Typen können ohne zusätzliche Installation direkt aus vue-amazing-ui importiert und verwendet werden.

 <script setup lang="ts">import type { ButtonProps } from 'vue-amazing-ui'const shape = ref<ButtonProps['shape']>('default')</script>
<Vorlage>
  <Button :shape="shape">Schaltfläche</Button>
</template>

Verwenden Sie Funktionen

 <script setup lang="ts">import { dateFormat, formatNumber, rafTimeout, cancelRaf,drossel, debounce, add, downloadFile, toggleDark, useEventListener, useMutationObserver, useScroll, useFps, useMediaQuery, useResizeObserver, useSlotsExist} aus 'vue-amazing-ui '</script>

Projekt

• Holen Sie sich den Projektcode

 Git-Klon https://github.com/themusecatcher/vue-amazing-ui.git

• Abhängigkeiten installieren

 cd vue-amazing-ui

pnpm i

• Projekt ausführen

 pnpm-Entwickler

Blogs

Meine CSDN-Blogs

Komponenten

Name	Beschreibung	Name	Beschreibung
Alarm	警告提示	Avatar	头像
ZurückOben	回到顶部	Abzeichen	徽标
Semmelbrösel	面包屑	Taste	按钮
Karte	卡片	Karussell	轮播图
Kaskader	级联选择	Kontrollkästchen	复选框
Zusammenbruch	折叠面板	Countdown	倒计时
DatePicker	日期选择	Beschreibungen	描述列表
Dialog	对话框	Teiler	分割线
Schublade	抽屉	Ellipse	文本省略
Leer	空状态	Biegen	弹性布局
FloatButton	浮动按钮	Farbverlaufstext	渐变文字
Netz	Nein	Bild	图片
Eingang	输入框	Eingabenummer	数字输入框
Eingabesuche	搜索框	Liste	列表
LoadingBar	加载条	Nachricht	全局提示
Modal	模态框	Benachrichtigung	通知提醒
NumberAnimation	数值动画	Pagination	分页
Popbestätigen	弹出确认	Popover	气泡卡片
Fortschritt	进度条	QRCode	二维码
Radio	单选框	Rate	评分
Ergebnis	结果	Bildlaufleiste	滚动条
Segmentiert	分段控制器	Wählen	选择器
Skeleton	骨架屏	Schieberegler	滑动输入条
Raum	间距	Drehen	加载中
Statistik	统计数值	Schritte	步骤条
Swiper	触摸滑动插件	Schalten	开关
Tisch	表格	Tabs	标签页
Etikett	标签	Textbereich	文本域
TextScroll	文字滚动	Zeitleiste	时间轴
Tooltip	文字提示	Hochladen	上传
Video	播放器	Wasserfall	瀑布流
Wasserzeichen	水印

Funktionen

Name	Beschreibung	Typ
dateFormat	Datum-Uhrzeit-String-Funktion formatieren	(Wert: Zahl | Zeichenfolge | Datum = Date.now(), Format: Zeichenfolge = 'JJJJ-MM-TT HH:mm:ss') => Zeichenfolge
formatNumber	Zahlenformatierungsfunktion	(Wert: Zahl | Zeichenfolge, Genauigkeit: Zahl = 2, Trennzeichen: Zeichenfolge = ',', Dezimalzahl: Zeichenfolge = '.', Präfix?: Zeichenfolge, Suffix?: Zeichenfolge) => Zeichenfolge
rafTimeout	Funktion zum Implementieren von setTimeout oder setInterval mithilfe von requestAnimationFrame	(fn: Funktion, Verzögerung: Zahl = 0, Intervall: boolean = false) => Objekt
abbrechenRaf	Funktion zum Abbrechen der rafTimeout -Funktion	(raf: { id: number }) => void
Gaspedal	Drosselfunktion	(fn: Funktion, Verzögerung: Zahl = 300) => beliebig
entprellen	Entprellfunktion	(fn: Funktion, Verzögerung: Zahl = 300) => beliebig
hinzufügen	Additionsfunktion, die Genauigkeitsprobleme in der JavaScript-Arithmetik beseitigt	(num1: Zahl, num2: Zahl) => Zahl
downloadFile	Funktion zum Herunterladen einer Datei mit einem benutzerdefinierten Dateinamen; Wenn kein Name angegeben wird, wird der Dateiname aus der URL extrahiert	(URL: String, Dateiname?: String) => void
toggleDunkel	Funktion zum Umschalten des Dunkelmodus	() => ungültig
useEventListener	Funktion zum Hinzufügen und Entfernen von Ereignis-Listenern mithilfe von Vue-Lebenszyklus-Hooks	(Ziel: HTMLElement | Fenster | Dokument, Ereignis: Zeichenfolge, Rückruf: Funktion) => void
Verwenden Sie MutationObserver	Funktion zum Beobachten von Änderungen in DOM-Elementen mithilfe von MutationObserver	(Ziel: Ref | Ref[] | HTMLElement | HTMLElement[], Rückruf: MutationCallback, Optionen = {}) => Objekt
Verwenden Sie Scrollen	Funktion zur Überwachung der Bildlaufposition und des Status eines Zielelements in Echtzeit	(Ziel: Ref | HTMLElement | Fenster | Dokument = Fenster, Drosselverzögerung: Zahl = 0, onScroll?: (e: Ereignis) => void, onStop?: (e: Ereignis) => void) => Objekt
useFps	Funktion zur Überwachung der Aktualisierungsrate (FPS) des Browsers in Echtzeit	() => Objekt
useMediaQuery	Funktion zum Ermitteln, ob die aktuelle Umgebung einer angegebenen Medienabfragebedingung entspricht	(mediaQuery: string) => Objekt
Verwenden SieResizeObserver	Funktion zum Beobachten von Änderungen in den Abmessungen von DOM-Elementen mithilfe von ResizeObserver	(Ziel: Ref | Ref[] | HTMLElement | HTMLElement[], Rückruf: ResizeObserverCallback, Optionen = {}) => Objekt
useSlotsExist	Funktion zum Überwachen der Existenz von Slots mit vorgegebenen Namen, die einzelne Slots oder eine Reihe von Slots unterstützen	(slotsName: string | string[] = 'default') => Reaktiv | Ref<boolean>