vue amazing ui

Vue UI Luar Biasa

Dokumentasi

Vue UI Luar Biasa

Fitur

• Pustaka komponen diimplementasikan dengan [email protected] + [email protected] + [email protected] + [email protected] .

• Saat ini, ia mencakup 63 komponen UI dasar dan 16 fungsi utilitas, dengan eksplorasi dan pembaruan terus-menerus...

• Terlebih lagi, semuanya dapat diguncang pohon.

• Semua hal di Vue Amazing UI ditulis dalam TypeScript. Ini dapat bekerja dengan proyek skrip Anda dengan lancar.

• Semua komponen dibangun dalam gaya SFC komponen file tunggal dan dapat digunakan secara mandiri.

• Siap digunakan di luar kotak, tidak perlu repot.

Instalasi

 pnpm tambahkan vue-amazing-ui# ornpm instal vue-amazing-ui# oryarn tambahkan vue-amazing-ui# orbun tambahkan vue-amazing-ui

Gunakan Komponen

Registrasi Global Semua Komponen (Tidak Direkomendasikan)

Tidak ada guncangan pohon. Bundel akan memiliki kode yang berlebihan.

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

Pendaftaran Parsial Global

Dalam formulir ini, hanya komponen yang diimpor saja yang akan dibundel.

 impor { createApp } dari 'vue'import Aplikasi dari './App.vue'import { Tombol, Tag } dari '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')

Pendaftaran Lokal

Dalam formulir ini, hanya komponen yang diimpor saja yang akan dibundel.

 <penyiapan skrip lang="ts">impor { Tombol, Tag } dari 'vue-amazing-ui'import 'vue-amazing-ui/es/button/Button.css'import 'vue-amazing-ui/es/tag /Tag.css'</script>
<templat>
  <Tombol>tombol</Tombol>
  <Tag>tag</Tag>
</templat>

Gaya Impor Otomatis (Disarankan)

Gunakan plugin vite-plugin-style-import untuk mengimpor gaya komponen secara otomatis sesuai permintaan. Plugin akan secara otomatis mengurai komponen yang digunakan dalam template dan mengimpor gayanya.

 pnpm tambahkan vite-plugin-style-import -D# ornpm install vite-plugin-style-import -D# oryarn tambahkan vite-plugin-style-import -D# orbun tambahkan vite-plugin-style-import -D

 // vite.config.tsimport {fineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { createStyleImportPlugin } from 'vite-plugin-style-import'// Secara otomatis mengimpor komponen styleimport { VueAmazingUIStyleResolve } dari ' vue-amazing-ui'// https://vitejs.dev/config/export default definisikanConfig({
  plugin: [vue(),// mengimpor gaya pustaka komponen pada demandcreateStyleImportPlugin({ menyelesaikan:[VueAmazingUIStyleResolve() ]})
  ]})

Kemudian, Anda dapat menggunakan semua komponen vue-amazing-ui dalam kode Anda tanpa perlu mengimpor gaya komponen secara manual, baik Anda menggunakan registrasi parsial global atau registrasi lokal.

• Pendaftaran Parsial Global

   impor { createApp } dari 'vue'import Aplikasi dari './App.vue'import { Tombol, Tag } dari 'vue-amazing-ui'const app = createApp(App)app.use(Button).use(Tag) aplikasi.mount('#aplikasi')

• Pendaftaran Lokal

   <script setup lang="ts">impor { Tombol, Tag } dari 'vue-amazing-ui'</script>
  <templat>
    <Tombol>tombol</Tombol>
    <Tag>tag</Tag>
  </templat>

Impor Sesuai Permintaan Otomatis (Sangat Disarankan)

Gunakan plugin unplugin-vue-components untuk mengimpor komponen sesuai permintaan secara otomatis. Plugin akan secara otomatis mengurai komponen yang digunakan dalam template dan mengimpor komponen dan gaya.

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

 // vite.config.tsimport { defineConfig } dari 'vite'import vue dari '@vitejs/plugin-vue'import Komponen dari 'unplugin-vue-components/vite'// vue-amazing-ui impor impor sesuai permintaan { VueAmazingUIResolver } dari 'vue-amazing-ui'// https://vitejs.dev/config/export default definisikanConfig({
  plugin: [vue(),Komponen({ penyelesai: [// impor otomatis komponen dari VueAmazingUIVueAmazingUIResolver() ]})
  ]})

Kemudian, Anda dapat langsung menggunakan semua komponen dari vue-amazing-ui dalam kode Anda.

 <templat>
  <Tombol>tombol</Tombol>
  <Tag>tag</Tag>
</templat>

Jenis Penggunaan

Semua tipe dapat langsung diimpor dan digunakan dari vue-amazing-ui tanpa instalasi tambahan apa pun.

 <script setup lang="ts">impor jenis { ButtonProps } dari 'vue-amazing-ui'const shape = ref<ButtonProps['shape']>('default')</script>
<templat>
  <Tombol :shape="shape">tombol</Button>
</templat>

Gunakan Fungsi

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

Proyek

• Dapatkan kode proyek

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

• Instal dependensi

 cd vue-menakjubkan-ui

pnpm i

• Jalankan proyek

 pengembang pnpm

Blog

Blog CSDN saya

Komponen

Nama	Keterangan	Nama	Keterangan
Peringatan	警告提示	Avatar	头像
Kembali Atas	回到顶部	Lencana	徽标
Remah roti	面包屑	Tombol	按钮
Kartu	foto	Korsel	轮播图
Kaskader	级联选择	kotak centang	复选框
Runtuh	折叠面板	Hitung mundur	倒计时
Pemilih Tanggal	期选择	Deskripsi	描述列表
Dialog	对话框	Pembagi	分割线
Laci	屉	Elipsis	文本省略
Kosong	空状态	Melenturkan	弹性布局
Tombol Apung	浮动按钮	Teks Gradien	渐变文字
jaringan	栅格	Gambar	foto
Masukan	输入框	Nomor Masukan	数字输入框
Pencarian Masukan	搜索框	Daftar	列表
Memuat Bar	加载条	Pesan	全局提示
Modal	态框	Pemberitahuan	通知提醒
Animasi Angka	数值动画	Paginasi	分页
Konfirmasi pop	弹出确认	Popover	气泡卡 foto
Kemajuan	进度条	Kode QR	二维码
Radio	单选框	Kecepatan	itu
Hasil	结果	Bilah gulir	滚动条
Tersegmentasi	分段控制器	Memilih	选择器
Kerangka	骨架屏	Penggeser	滑动输入条
Ruang angkasa	间距	Putaran	加载中
Statistik	统计数值	Tangga	步骤条
penggesek	触摸滑动插件	Mengalihkan	开关
Meja	itu	tab	标签页
Menandai	标签	Area teks	文本域
Gulir Teks	文字滚动	Garis waktu	时间轴
Keterangan alat	文字提示	Mengunggah	上传
Video	播放器	Air terjun	布流
Tanda air	水印

Fungsi

Nama	Keterangan	Jenis
format tanggal	Format fungsi string tanggal-waktu	(nilai: angka | string | Tanggal = Tanggal.sekarang(), format: string = 'YYYY-MM-DD HH:mm:ss') => string
formatNomor	Fungsi pemformatan angka	(nilai: angka | string, presisi: angka = 2, pemisah: string = ',', desimal: string = '.', awalan?: string, akhiran?: string) => string
rafTimeout	Berfungsi untuk mengimplementasikan setTimeout atau setInterval menggunakan requestAnimationFrame	(fn: Fungsi, penundaan: angka = 0, interval: boolean = false) => objek
batalkanRaf	Berfungsi untuk membatalkan fungsi rafTimeout	(raf: { id: nomor }) => batal
mencekik	Fungsi throttle	(fn: Fungsi, penundaan: angka = 300) => apa saja
menghilangkan bouncing	Fungsi menghilangkan pantulan	(fn: Fungsi, penundaan: angka = 300) => apa saja
menambahkan	Fungsi tambahan yang menghilangkan masalah presisi dalam aritmatika JavaScript	(angka1: angka, angka2: angka) => angka
unduhFile	Berfungsi untuk mengunduh file dengan nama file khusus; jika tidak ada nama yang diberikan, ia akan mengekstrak nama file dari URL	(url: string, Nama file?: string) => batal
beralihGelap	Berfungsi untuk mengaktifkan mode gelap	() => batal
gunakanEventListener	Berfungsi untuk menambah dan menghapus event pendengar menggunakan kait siklus hidup Vue	(target: HTMLElement | Jendela | Dokumen, acara: string, panggilan balik: Fungsi) => batal
gunakanMutationObserver	Berfungsi untuk mengamati perubahan elemen DOM menggunakan MutationObserver	(target: Ref | Ref[] | HTMLElement | HTMLElement[], panggilan balik: MutationCallback, options = {}) => objek
gunakan Gulir	Berfungsi untuk memantau posisi gulir dan keadaan elemen target secara real time	(target: Ref | HTMLElement | Window | Document = window, throttleDelay: number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => objek
gunakanFps	Berfungsi untuk memantau refresh rate (FPS) browser secara real time	() => objek
gunakanMediaQuery	Berfungsi untuk menentukan apakah lingkungan saat ini cocok dengan kondisi kueri media tertentu	(mediaQuery: string) => objek
gunakanResizeObserver	Berfungsi untuk mengamati perubahan dimensi elemen DOM menggunakan ResizeObserver	(target: Ref | Ref[] | HTMLElement | HTMLElement[], panggilan balik: ResizeObserverCallback, options = {}) => objek
gunakanSlotsExist	Berfungsi untuk mengamati keberadaan slot dengan nama tertentu, mendukung slot tunggal atau serangkaian slot	(slotsName: string | string[] = 'default') => Reaktif | Ref<boolean>