vue3+datav实现大屏效果

浩星2025-11-16 20:35

前言：

众所周知dataV算是我们大屏经常使用的炫酷插件了，他有vue2版本，vue3版本，react版本的使用，我们这里说下他的vue3版本

实现效果：

官方地址：

https://datav-vue3.netlify.app/Guide/Guide.htmlhttps://datav-vue3.netlify.app/Guide/Guide.html

安装插件

javascript 复制代码

npm i @kjgl77/datav-vue3

全局引入：

javascript 复制代码

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import DataVVue3 from '@kjgl77/datav-vue3'
createApp(App).use(DataVVue3).mount('#app')

按需引入：

javascript 复制代码

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