DataV（@kjgl77/datav-vue3）是專為“大屏可視化”場景打造的 Vue3 組件庫，提供邊框、裝飾、等數十個開箱即用的視覺組件。本文聚焦 “在 Vue3 項目中如何正確使用 DataV”，從安裝、全局注冊到常見坑點，帶你迅速玩轉這款酷炫的 UI 套件。
1. 安裝依賴
# NPM / Yarn / PNPM 均可
npm i @kjgl77/datav-vue3 -S
DataV 使用 SVG + CSS 動畫 實現，體積輕量且無其他強依賴。
2. 全局引入 vs 按需引入
2.1 全局引入（推薦大屏項目）
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import DataVVue3 from '@kjgl77/datav-vue3'
createApp(App).use(DataVVue3).mount('#app')
- 所有組件會自動注冊為 kebab-case 標簽，例如
dv-border-box-1、dv-decoration-3、dv-scroll-board。
2.2 按需引入（組件級使用）
<script setup lang="ts">
import { BorderBox1, Decoration2 } from '@kjgl77/datav-vue3'
</script><template><border-box-1 style="width:400px;height:200px;"><decoration-2 :reverse="true" style="width:380px;height:5px;" /></border-box-1>
</template>
- 按需引入仍需
import '.../styles/index.css'，否則動畫樣式會丟失。
3. DataV 組件一覽
| 分類 | 組件示例 | 典型用法 |
|---|---|---|
| 邊框 | dv-border-box-1 ~ 13 | 作為容器包裝業務組件 |
| 裝飾 | dv-decoration-1 ~ 12 | 頁面點綴、分割線 |
官方 Demo + 文檔：https://datav-vue3.jiaminghi.com/
4. 快速示例：邊框 + 裝飾
<template>
<div style="color:white;display:flex;gap:20px;justify-content:center;margin-top:15px;"><!-- dv-border-box-1 示例，必須指定寬高 --><dv-border-box-1 :color="['#0ff','#00faff']" style="width:300px;height:150px;display:flex;align-items:center;justify-content:center;">dv-border-box-1</dv-border-box-1><!-- dv-border-box-2 示例 --><dv-border-box-2 style="width:300px;height:150px;display:flex;align-items:center;justify-content:center;">dv-border-box-2</dv-border-box-2></div>
</template><style scoped>
.content{display:flex;flex-direction:column;align-items:center;color:#fff;}
</style>
要點：
- 寬高必填 —— 邊框/裝飾默認
100%自適應，如果父級尺寸為auto則 SVG 寬高 = 0，導致組件不渲染。 - 自定義顏色 —— 大多數組件支持
:color="['主色', '輔色']"，裝飾組件還可通過:dur="動畫周期(s)"調節速度。
5. 常見坑 & FAQ
| 問題 | 處理方案 |
|---|---|
| 組件不顯示/無動畫 | 檢查父元素是否有寬高；瀏覽器控制臺確認標簽名使用 kebab-case（dv-border-box-1 而不是 BorderBox1）。 |
| 邊框寬高異常 | 當父容器重新調整尺寸后，調用邊框實例的 initWH() 重新計算；或通過 key 觸發組件重渲染。 |
| 樣式沖突 | 將業務 DOM 放入邊框默認插槽的 唯一子元素 內部，并為其設置內部布局，避免直接對 .dv-border-box-content 作用 CSS。 |
頁面白屏、控制臺報錯 ResizeObserver loop limit exceeded | 在極少數瀏覽器下快速切換路由可能觸發警告，可忽略；如需消除，在處理 beforeUnmount 時注銷定時器/監聽器。 |
6. 結語
DataV 讓 Vue3 的大屏項目“信手拈來”：
- 快速：幾十個組件全局注冊即用，省去設計時間。
- 輕量：SVG 實現，不依賴 Canvas，兼容移動端。
- 可擴展：源碼開源，可二次開發適配業務。
如果你正在為大屏展示、運營監控、物聯網可視化頭疼，不妨嘗試 @kjgl77/datav-vue3。
一句 app.use(DataVVue3)，炫酷動畫瞬間到位！
