DataV - Vue3

支持 Vue3 + Vite 的 DataV 组件库

前言：npm install @jiaminghi/data-view之后启动项目有报错，发布到线上的生产环境是自动化构建的，为了避免npm install也会有开发环境的报错问题，故因此记录。

目录

DataV - Vue3

效果

 一、介绍

1、官方文档

2、官方示例

3、支持二次开发

二、准备工作

1、安装依赖包

 2、示例版本 

三、使用步骤

1、注册

        1）在main.ts/js文件中全局组件注册

        2）在单个.vue单文件局部注册

 2、设置容器宽高

四、完整示例

1、main.ts

 2、example.vue

 欢迎扫描下方二维码关注VX公众号

---

效果

 一、介绍

1、官方文档

DataV - Vue3

DataV - Vue3A VitePress sitehttps://datav-vue3.netlify.app/

2、官方示例

3、支持二次开发

二次开发 | DataV - Vue3

二次开发 | DataV - Vue3A VitePress sitehttps://datav-vue3.netlify.app/Guide/contribute.html

二、准备工作

1、安装依赖包

npm install @kjgl77/datav-vue3

注：此处使用npm工具，也可以yarn，pnpm等

DataV Vue3+TS+Vite版 | DataV - Vue3

 2、示例版本 

"@kjgl77/datav-vue3": "^1.7.3",

三、使用步骤

1、注册

        1）在main.ts/js文件中全局组件注册

import { createApp } from 'vue';

import DataVVue3 from '@kjgl77/datav-vue3';

const app = createApp(App);

app.use(DataVVue3);

        2）在单个.vue单文件局部注册

<script lang="ts" setup>
import { Decoration1, Decoration2 } from '@kjgl77/datav-vue3'
</script>

注：这里以全局注册为例

DataV Vue3+TS+Vite版 | DataV - Vue3DataV Vue3+TS+Vite版 | DataV - Vue3

 2、设置容器宽高

<div class="wrap">
  <dv-border-box-8 dur="6" :color="['#325196', '#3A9BC3']" backgroundColor="#282C34">
  <div class="main">
	<div>这是小标题</div>
    <dv-decoration-2 class="dv-line" />
	<div>这是主内容</div>
   </div>
 </dv-border-box-8>
</div>

<style scoped>
.wrap {
  width: 300px;
  height: 300px;
  color: #fff;
  background-color: #282c34;
  .main {
	padding: 10px;
	.dv-line {
      height: 2px;
	}
  }
}
</style>

DataV Vue3+TS+Vite版 | DataV - Vue3

边框组件注意事项 | DataV - Vue3

四、完整示例

1、main.ts

import { createApp } from 'vue';

// DataVVue3组件
import DataVVue3 from '@kjgl77/datav-vue3';

const app = createApp(App);

app
  .use(DataVVue3) // DataVVue3全局引入
  .mount('#app');

 2、example.vue

<template>
  <div class="wrap">
    <dv-border-box-8 ref="dvBox" dur="6" :color="['#325196', '#3A9BC3']" backgroundColor="#282C34">
  <div class="main">
	<div>这是小标题</div>
      <dv-decoration-2 class="dv-line" />
	  <div>这是主内容</div>
     </div>
   </dv-border-box-8>
  </div>
</template>

<script setup lang="ts" name="example">
</script>

<style scoped>
.wrap {
  width: 300px;
  height: 300px;
  color: #fff;
  background-color: #282c34;
  .main {
	padding: 10px;
	.dv-line {
      height: 2px;
	}
  }
}
</style>

tip：如果有出现边框底部没有的问题（如下图所示），请看这里Vue3 dataV 使用initWH()解决因使用边框造成组件宽高异常的问题 - 附完整示例_datav 大屏,高度不够处理-CSDN博客

 欢迎扫描下方二维码关注VX公众号

插件作者：

个人改的vue3+vite版本，供大家参考使用 · Issue #269 · DataV-Team/DataV · GitHub