หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

UI ที่น่าทึ่งของ Vue

เอกสารประกอบ

UI ที่น่าทึ่งของ Vue

คุณสมบัติ

  • ไลบรารีส่วนประกอบถูกนำไปใช้กับ [email protected] + [email protected] + [email protected] + [email protected]

  • ปัจจุบันมีองค์ประกอบ UI พื้นฐาน 63 รายการและฟังก์ชันยูทิลิตี้ 16 พร้อมการสำรวจและอัปเดตอย่างต่อเนื่อง...

  • ยิ่งไปกว่านั้น พวกมันทั้งหมดยังสั่นคลอนได้อีกด้วย

  • ทุกสิ่งใน Vue Amazing UI เขียนด้วย TypeScript มันสามารถทำงานร่วมกับโปรเจ็กต์ typescript ของคุณได้อย่างราบรื่น

  • ส่วนประกอบทั้งหมดสร้างขึ้นในรูปแบบไฟล์เดี่ยว SFC และสามารถใช้งานได้อย่างอิสระ

  • พร้อมใช้งานทันที ไม่ยุ่งยาก

การติดตั้ง

 pnpm เพิ่ม vue-amazing-ui# ornpm ติดตั้ง vue-amazing-ui# oryarn เพิ่ม vue-amazing-ui# orbun เพิ่ม vue-amazing-ui

ใช้ส่วนประกอบ

การลงทะเบียนทั่วโลก ส่วนประกอบทั้งหมด (ไม่แนะนำ)

ไม่มีการสั่นไหวของต้นไม้ Bundle จะมีรหัสซ้ำซ้อน

 นำเข้า { createApp } จาก 'vue' นำเข้าแอปจาก './App.vue' นำเข้า VueAmazingUI จาก 'vue-amazing-ui'import 'vue-amazing-ui/css'const app = createApp (แอป) app.use (VueAmazingUI )app.mount('#แอป')

การลงทะเบียนบางส่วนทั่วโลก

ในแบบฟอร์มนี้ เฉพาะส่วนประกอบที่นำเข้าเท่านั้นที่จะถูกรวมกลุ่ม

 นำเข้า { createApp } จาก 'vue' นำเข้าแอปจาก './App.vue' นำเข้า { ปุ่ม, แท็ก } จาก 'vue-amazing-ui'import 'vue-amazing-ui/es/button/Button.css'import ' vue-amazing-ui/es/tag/Tag.css'const แอป = createApp(แอป)app.use(ปุ่ม).use(Tag)app.mount('#app')

การลงทะเบียนท้องถิ่น

ในแบบฟอร์มนี้ เฉพาะส่วนประกอบที่นำเข้าเท่านั้นที่จะถูกรวมกลุ่ม

 <script setup lang="ts">นำเข้า { ปุ่ม, แท็ก } จาก '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 { DefinConfig } จาก 'vite'import vue จาก '@vitejs/plugin-vue'import { createStyleImportPlugin } จาก 'vite-plugin-style-import'// นำเข้าส่วนประกอบ stylesimport { VueAmazingUIStyleResolve } จาก ' โดยอัตโนมัติ vue-amazing-ui'// https://vitejs.dev/config/export ค่าเริ่มต้น กำหนดคอนฟิก({
  ปลั๊กอิน: [vue()// นำเข้าสไตล์ไลบรารีส่วนประกอบตามต้องการ createStyleImportPlugin ({ แก้ไข: [VueAmazingUIStyleResolve() ]})
  -

จากนั้น คุณสามารถใช้ส่วนประกอบทั้งหมดของ vue-amazing-ui ในโค้ดของคุณโดยไม่จำเป็นต้องนำเข้าสไตล์ส่วนประกอบด้วยตนเอง ไม่ว่าคุณจะใช้การลงทะเบียนบางส่วนส่วนกลางหรือการลงทะเบียนในท้องถิ่นก็ตาม

  • การลงทะเบียนบางส่วนทั่วโลก

     นำเข้า { createApp } จาก 'vue' นำเข้าแอปจาก './App.vue' นำเข้า { ปุ่ม, แท็ก } จาก 'vue-amazing-ui'const app = createApp(App)app.use(Button).use(Tag) app.mount('#แอป')

  • การลงทะเบียนท้องถิ่น

     <script setup lang="ts">นำเข้า { ปุ่ม, แท็ก } จาก 'vue-amazing-ui'</script>
<แม่แบบ>
  <ปุ่ม>ปุ่ม</ปุ่ม>
  <แท็ก>แท็ก</แท็ก>
</แม่แบบ>

การนำเข้าตามความต้องการอัตโนมัติ (แนะนำอย่างยิ่ง)

ใช้ปลั๊กอิน unplugin-vue-components เพื่อนำเข้าส่วนประกอบโดยอัตโนมัติตามต้องการ ปลั๊กอินจะแยกวิเคราะห์ส่วนประกอบที่ใช้ในเทมเพลตโดยอัตโนมัติและนำเข้าส่วนประกอบและสไตล์

 pnpm เพิ่ม unplugin-vue-components -D# ornpm ติดตั้ง unplugin-vue-components -D# oryarn เพิ่ม unplugin-vue-components -D# orbun เพิ่ม unplugin-vue-components -D
 // vite.config.tsimport { DefinConfig } จาก 'vite'import vue จาก '@vitejs/plugin-vue'import Components จาก 'unplugin-vue-components/vite'// vue-amazing-ui ตามความต้องการนำเข้านำเข้า { VueAmazingUIResolver } จาก 'vue-amazing-ui'// https://vitejs.dev/config/export ค่าเริ่มต้นกำหนด ({
  ปลั๊กอิน: [vue(),ส่วนประกอบ({ ตัวแก้ไข: [// นำเข้าส่วนประกอบอัตโนมัติจาก VueAmazingUIVueAmazingUIResolver() ]})
  -

จากนั้น คุณจะสามารถใช้ส่วนประกอบทั้งหมดจาก vue-amazing-ui ในโค้ดของคุณได้โดยตรง

 <แม่แบบ>
  <ปุ่ม>ปุ่ม</ปุ่ม>
  <แท็ก>แท็ก</แท็ก>
</แม่แบบ>

ใช้ประเภท

ทุกประเภทสามารถนำเข้าและใช้งานได้โดยตรงจาก vue-amazing-ui โดยไม่ต้องติดตั้งเพิ่มเติม

 <script setup lang="ts">ประเภทการนำเข้า { ButtonProps } จาก 'vue-amazing-ui'const shape = ref<ButtonProps['shape']>('default')</script>
<แม่แบบ>
  <ปุ่ม :shape="shape">ปุ่ม</ปุ่ม>
</แม่แบบ>

ใช้ฟังก์ชั่น

 <script setup lang="ts">import { dateFormat, formatNumber, rafTimeout, cancelRaf, throttle, debounce, add, downloadFile, toggleDark, useEventListener, useMutationObserver, useScroll, useFps, useMediaQuery, useResizeObserver, useSlotsExist} จาก 'vue-amazing-ui '</สคริปต์>

โครงการ

  • รับรหัสโครงการ

 โคลนคอมไพล์ https://github.com/themusecatcher/vue-amazing-ui.git

  • ติดตั้งการพึ่งพา

 ซีดี vue-amazing-ui

เวลาบ่ายโมงครึ่ง

  • ดำเนินโครงการ

 ผู้พัฒนา pnpm

บล็อก

บล็อก CSDN ของฉัน

ส่วนประกอบ

ชื่อ คำอธิบาย ชื่อ คำอธิบาย
เตือน警告提示อวตาร头ฝา
กลับด้านบน回到顶部ตราสัญลักษณ์徽标
เกล็ดขนมปัง เลดี้包屑ปุ่ม按钮
การ์ด卡ฝา ม้าหมุน轮播ภาพ
คาสเคดเดอร์级联选择ช่องทำเครื่องหมาย复选框
ทรุด折叠的板นับถอยหลัง倒计时
DatePicker日期选择คำอธิบาย描述列表
กล่องโต้ตอบ对话框ตัวแบ่ง分割线
ลิ้นชัก抽屉จุดไข่ปลา文本省略
ว่างเปล่า空状态ดิ้น弹性布局
ปุ่มลอย浮动按钮ข้อความไล่ระดับสี渐变文字
กริด栅格ภาพ วอลล์เปเปอร์
ป้อนข้อมูล输入框หมายเลขอินพุต数字输入框
ป้อนข้อมูลการค้นหา搜索框รายการ列表
กำลังโหลดBar加载条ข้อความ全局提示
เป็นกิริยาช่วย模态框การแจ้งเตือน通知提醒
ตัวเลขแอนิเมชั่น数值动画การแบ่งหน้า分页
ป๊อปคอนเฟิร์ม弹出确认ป๊อปโอเวอร์气泡卡ฝา
ความคืบหน้า进度条คิวอาร์โค้ด二维码
วิทยุ单选框ประเมิน评分
ผลลัพธ์结果แถบเลื่อน滚动条
แบ่งส่วน分段控制器เลือก选择器
โครงกระดูก骨架屏สไลเดอร์滑动输入条
ช่องว่าง间距สปิน加载中
สถิติ统计数值ขั้นตอน步骤条
สไวเปอร์触摸滑动插件สวิตช์ เริ่ม关
โต๊ะ表格แท็บ标签页
แท็ก标签พื้นที่ข้อความ文本域
ข้อความเลื่อน文字滚动ไทม์ไลน์时间轴
เคล็ดลับเครื่องมือ文字提示อัปโหลด上传
วีดีโอ播放器น้ำตก瀑布流
ลายน้ำ水印

ฟังก์ชั่น

ชื่อ คำอธิบาย พิมพ์
วันที่รูปแบบ จัดรูปแบบฟังก์ชันสตริงวันที่-เวลา (ค่า: ตัวเลข | string | วันที่ = Date.now() รูปแบบ: string = 'YYYY-MM-DD HH:mm:ss') => string
รูปแบบหมายเลข ฟังก์ชั่นการจัดรูปแบบตัวเลข (ค่า: หมายเลข | สตริง, ความแม่นยำ: หมายเลข = 2, ตัวคั่น: string = ',', ทศนิยม: string = '.', คำนำหน้า?: string, ส่วนต่อท้าย?: string) => string
rafTimeout ฟังก์ชันสำหรับใช้งาน setTimeout หรือ setInterval โดยใช้ requestAnimationFrame (fn: ฟังก์ชั่น, ดีเลย์: number = 0, ช่วง: boolean = false) => object
ยกเลิกราฟ ฟังก์ชันยกเลิกฟังก์ชัน rafTimeout (raf: { id: number }) => เป็นโมฆะ
เค้น ฟังก์ชั่นคันเร่ง (fn: ฟังก์ชั่น, ดีเลย์: หมายเลข = 300) => ใดๆ
ดีเด้ง ฟังก์ชั่นดีเด้ง (fn: ฟังก์ชั่น, ดีเลย์: หมายเลข = 300) => ใดๆ
เพิ่ม ฟังก์ชันเพิ่มเติมที่ช่วยขจัดปัญหาด้านความแม่นยำในเลขคณิต JavaScript (num1: ตัวเลข, num2: ตัวเลข) => ตัวเลข
ดาวน์โหลดไฟล์ ฟังก์ชั่นดาวน์โหลดไฟล์ด้วยชื่อไฟล์ที่กำหนดเอง หากไม่มีการระบุชื่อ ระบบจะแยกชื่อไฟล์ออกจาก URL (url: string, fileName?: string) => void
สลับความมืด ฟังก์ชั่นเพื่อสลับโหมดมืด () => เป็นโมฆะ
ใช้EventListener ฟังก์ชั่นเพื่อเพิ่มและลบผู้ฟังเหตุการณ์โดยใช้ Vue lifecycle hooks (เป้าหมาย: HTMLElement | หน้าต่าง | เอกสาร เหตุการณ์: สตริง โทรกลับ: ฟังก์ชัน) => void
ใช้ MutationObserver ฟังก์ชั่นสังเกตการเปลี่ยนแปลงในองค์ประกอบ DOM โดยใช้ MutationObserver (เป้าหมาย: Ref | Ref[] | HTMLElement | HTMLElement[], โทรกลับ: MutationCallback, options = {}) => object
ใช้Scroll ฟังก์ชั่นตรวจสอบตำแหน่งการเลื่อนและสถานะขององค์ประกอบเป้าหมายแบบเรียลไทม์ (เป้าหมาย: Ref | HTMLElement | Window | Document = window, throttleDelay: number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => object
ใช้ Fps ฟังก์ชั่นตรวจสอบอัตราการรีเฟรชของเบราว์เซอร์ (FPS) แบบเรียลไทม์ () => วัตถุ
ใช้MediaQuery ฟังก์ชันเพื่อตรวจสอบว่าสภาพแวดล้อมปัจจุบันตรงกับเงื่อนไขการสืบค้นสื่อที่ระบุหรือไม่ (mediaQuery: string) => วัตถุ
ใช้ ResizeObserver ฟังก์ชั่นสังเกตการเปลี่ยนแปลงขนาดขององค์ประกอบ DOM โดยใช้ ResizeObserver (เป้าหมาย: Ref | Ref[] | HTMLElement | HTMLElement[], โทรกลับ: ResizeObserverCallback, options = {}) => object
ใช้SlotsExist ฟังก์ชั่นเฝ้าดูการมีอยู่ของสล็อตตามชื่อที่กำหนด รองรับสล็อตเดี่ยวหรืออาร์เรย์ของสล็อต (slotsName: string | string[] = 'default') => ปฏิกิริยา | อ้างอิง<บูลีน>
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด