vue amazing ui

واجهة مستخدم مذهلة

التوثيق

واجهة مستخدم مذهلة

سمات

• يتم تنفيذ مكتبة المكونات باستخدام [email protected] + [email protected] + [email protected] + [email protected] .

• يتضمن حاليًا 63 مكونًا أساسيًا لواجهة المستخدم و 16 وظيفة مساعدة، مع الاستكشاف المستمر والتحديثات المستمرة...

• والأكثر من ذلك، أنها جميعها قابلة للاهتزاز.

• كل الأشياء الموجودة في Vue Amazing UI مكتوبة بلغة TypeScript. يمكنه العمل مع مشروع الآلة الكاتبة الخاص بك بسلاسة.

• تم إنشاء جميع المكونات بأسلوب SFC لمكون ملف واحد ويمكن استخدامها بشكل مستقل.

• جاهز للاستخدام بمجرد إخراجه من الصندوق، دون أي ضجة.

تثبيت

 pnpm إضافة vue-amazing-ui# ornpm تثبيت vue-amazing-ui# oryarn إضافة vue-amazing-ui# orbun إضافة vue-amazing-ui

استخدم المكونات

التسجيل الشامل لجميع المكونات (غير مستحسن)

لا تهتز الشجرة. ستحتوي الحزمة على رموز زائدة عن الحاجة.

 استيراد { createApp } من 'vue'استيراد التطبيق من './App.vue'import VueAmazingUI من 'vue-amazing-ui'import 'vue-amazing-ui/css'const app = createApp(App)app.use(VueAmazingUI) )app.mount('#app')

التسجيل الجزئي العالمي

في هذا النموذج، سيتم تجميع المكونات المستوردة فقط.

 استيراد { createApp } من 'vue'import App من './App.vue'import { Button، Tag } من '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">استيراد { Button, Tag } من 'vue-amazing-ui'import 'vue-amazing-ui/es/button/Button.css'import 'vue-amazing-ui/es/tag /Tag.css'</script>
<قالب>
  <زر>زر</زر>
  <العلامة>العلامة</العلامة>
</قالب>

أنماط الاستيراد التلقائي (مستحسن)

استخدم البرنامج المساعد vite-plugin-style-import لاستيراد أنماط المكونات تلقائيًا عند الطلب. سيقوم البرنامج المساعد تلقائيًا بتحليل المكونات المستخدمة في القالب واستيراد أنماطها.

 pnpm إضافة vite-plugin-style-import -D# ornpm تثبيت vite-plugin-style-import -D# oryarn إضافة vite-plugin-style-import -D# orbun إضافة vite-plugin-style-import -D

 // vite.config.tsimport {defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { createStyleImportPlugin } from 'vite-plugin-style-import'// استيراد المكونات تلقائيًا styleimport { VueAmazingUIStyleResolve } from ' vue-amazing-ui'// https://vitejs.dev/config/export التكوين الافتراضي ({
  المكونات الإضافية: [vue(),// يستورد أنماط مكتبة المكونات عند الطلب createStyleImportPlugin({ يحل:[VueAmazingUIStyleResolve() ]})
  ]})

بعد ذلك، يمكنك استخدام جميع مكونات vue-amazing-ui في التعليمات البرمجية الخاصة بك دون الحاجة إلى استيراد أنماط المكونات يدويًا، سواء كنت تستخدم التسجيل الجزئي العالمي أو التسجيل المحلي.

• التسجيل الجزئي العالمي

   استيراد { createApp } من 'vue'import App من './App.vue'import { Button، Tag } من 'vue-amazing-ui'const app = createApp(App)app.use(Button).use(Tag) app.mount('#app')

• التسجيل المحلي

   <script setup lang="ts">استيراد { Button, Tag } من 'vue-amazing-ui'</script>
  <قالب>
    <زر>زر</زر>
    <العلامة>العلامة</العلامة>
  </قالب>

الاستيراد التلقائي عند الطلب (موصى به بشدة)

استخدم المكون الإضافي unplugin-vue-components لاستيراد المكونات تلقائيًا عند الطلب. سيقوم البرنامج المساعد تلقائيًا بتحليل المكونات المستخدمة في القالب واستيراد المكونات والأنماط.

 pnpm إضافة مكونات unplugin-vue -D# ornpm تثبيت مكونات unplugin-vue -D# oryarn إضافة مكونات unplugin-vue -D# orbun إضافة مكونات unplugin-vue -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 } من 'vue-amazing-ui'// https://vitejs.dev/config/export التكوين الافتراضي ({
  المكونات الإضافية: [vue(),Components({ أدوات الحل: [// مكونات الاستيراد التلقائي من VueAmazingUIVueAmazingUIResolver() ]})
  ]})

بعد ذلك، يمكنك استخدام جميع المكونات مباشرة من vue-amazing-ui في التعليمات البرمجية الخاصة بك.

 <قالب>
  <زر>زر</زر>
  <العلامة>العلامة</العلامة>
</قالب>

أنواع الاستخدام

يمكن استيراد جميع الأنواع مباشرة واستخدامها من 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" '</script>

مشروع

• الحصول على رمز المشروع

 استنساخ بوابة https://github.com/themusecatcher/vue-amazing-ui.git

• تثبيت التبعيات

 cd vue-amazing-ui

بنبم ط

• تشغيل المشروع

 تطوير pnpm

مدونات

مدونات CSDN الخاصة بي

عناصر

اسم	وصف	اسم	وصف
يُحذًِر	شكرا جزيلا	الصورة الرمزية	头像
باكتوب	شكرا جزيلا	شارة	徽标
مسار التنقل	面包屑	زر	按钮
بطاقة	الصورة	دائري	شكرا جزيلا
المتتالية	شكرا جزيلا	خانة الاختيار	复选框
ينهار	شكرا جزيلا	العد التنازلي	لعبة
منتقي التاريخ	日期选择	الأوصاف	شكرا جزيلا
الحوار	شكرا جزيلا	مقسم	شكرا جزيلا
درج	抽屉	القطع الناقص	文本省略
فارغ	هذا هو	ثني	弹性布局
الزر العائم	浮动按钮	GradientText	渐变文字
شبكة	栅格	صورة	الصورة الفوتوغرافية
مدخل	输入框	رقم الإدخال	数字输入框
بحث الإدخال	搜索框	قائمة	شكرا
شريط التحميل	加载条	رسالة	شكرا جزيلا
مشروط	شكرا جزيلا	إشعار	通知提醒
NumberAnimation	شكرا جزيلا	ترقيم الصفحات	نعم
تأكيد البوب	弹出确认	بوبوفر	الصورة التالية
تقدم	شكرا جزيلا	رمز الاستجابة السريعة	هذا هو
راديو	شكرا جزيلا	معدل	شكرا
نتيجة	结果	شريط التمرير	شكرا جزيلا
مجزأة	شكرا لك	يختار	جديد
هيكل عظمي	جديد	المنزلق	滑动输入条
فضاء	间距	يلف	加载中
إحصائية	统计数值	خطوات	步骤条
سوايبر	شكرا جزيلا	يُحوّل	开关
طاولة	شكرا	علامات التبويب	标签页
علامة	标签	منطقة النص	文本域
تمرير النص	شكرا جزيلا	الجدول الزمني	时间轴
تلميح الأداة	文字提示	رفع	上传
فيديو	播放器	شلال	瀑布流
العلامة المائية	水印

وظائف

اسم	وصف	يكتب
dateFormat	تنسيق وظيفة سلسلة التاريخ والوقت	(القيمة: رقم | سلسلة | التاريخ = Date.now()، التنسيق: سلسلة = 'YYYY-MM-DD HH:mm:ss') => سلسلة
formatNumber	وظيفة تنسيق الأرقام	(القيمة: رقم | سلسلة، الدقة: رقم = 2، فاصل: سلسلة = '،'، العلامة العشرية: سلسلة = '.'، بادئة؟: سلسلة، لاحقة؟: سلسلة) => سلسلة
rafTimeout	وظيفة لتنفيذ setTimeout أو setInterval باستخدام requestAnimationFrame	(fn: الدالة، التأخير: الرقم = 0، الفاصل الزمني: منطقي = خطأ) => كائن
CancelRaf	وظيفة لإلغاء وظيفة rafTimeout	(raf: {id: number}) => باطل
خنق	وظيفة خنق	(fn: الدالة، التأخير: الرقم = 300) => أي
نبذ	وظيفة الرفض	(fn: الدالة، التأخير: الرقم = 300) => أي
يضيف	وظيفة الإضافة التي تقضي على مشكلات الدقة في حساب JavaScript	(رقم 1: رقم، رقم 2: رقم) => رقم
downloadFile	وظيفة تنزيل ملف باسم ملف مخصص؛ إذا لم يتم توفير اسم، فإنه يستخرج اسم الملف من عنوان URL	(عنوان url: سلسلة، اسم الملف؟: سلسلة) => باطل
toggleDark	وظيفة لتبديل الوضع المظلم	() => باطل
useEventListener	وظيفة لإضافة وإزالة مستمعي الأحداث باستخدام خطافات دورة حياة Vue	(الهدف: HTMLElement | نافذة | مستند، حدث: سلسلة، رد الاتصال: الوظيفة) => باطل
useMutationObserver	وظيفة لمراقبة التغييرات في عناصر DOM باستخدام MutationObserver	(الهدف: المرجع | المرجع [] | HTMLElement | HTMLElement[]، رد الاتصال: MutationCallback، options = {}) => كائن
useScroll	وظيفة لمراقبة موضع التمرير وحالة العنصر المستهدف في الوقت الفعلي	(الهدف: المرجع | HTMLElement | نافذة | مستند = نافذة، throttleDelay: رقم = 0، onScroll؟: (e: Event) => void، onStop؟: (e: Event) => void) => object
useFps	وظيفة لمراقبة معدل تحديث المتصفح (FPS) في الوقت الحقيقي	() => كائن
useMediaQuery	وظيفة لتحديد ما إذا كانت البيئة الحالية تتطابق مع شرط استعلام الوسائط المحدد	(mediaQuery: سلسلة) => كائن
useResizeObserver	وظيفة لمراقبة التغييرات في أبعاد عناصر DOM باستخدام ResizeObserver	(الهدف: المرجع | المرجع [] | HTMLElement | HTMLElement[]، رد الاتصال: ResizeObserverCallback، options = {}) => كائن
useSlotsExist	وظيفة لمراقبة وجود فتحات بأسماء معينة، أو دعم فتحات فردية أو مجموعة من الفتحات	(slotsName: string | string[] = 'default') => رد الفعل | المرجع<منطقي>