# 介绍
组件库基于Vue (React版 (opens new window)) ,主要用于构建大屏(全屏)数据展示页面即数据可视化,具有多种类型组件可供使用:
- 边框
带有不同边框的容器
- 装饰
用来点缀页面效果,增加视觉效果
- 图表
图表组件基于Charts (opens new window)封装,轻量,易用
- 其他
飞线图/水位图/轮播表/...
# 用前必看
使用前应阅读以下提示,这样出现相应问题后可以快速解决。
兼容性
组件库的开发和调试都使用Chrome浏览器,没有时间和精力做其他浏览器的兼容,尤其是IE。
所以请使用Chrome浏览器。
宽高异常
组件的默认宽高都是100%,可以根据父容器宽高进行自适应,但在某些情况下组件宽高可能表现异常,这种情况一般是因为组件的父容器宽高发生了变化,而组件没有侦知这一变化,你可以在组件上绑定key值,在更改父容器宽高且页面完成重绘后(使用$nextTick),更新key值,使组件强制刷新,以获取正确宽高。
状态更新
避免你的组件更新了数据后,状态却不刷新,也就是没变化,请务必看这里
组件props均未设置deep监听,刷新props时,请直接生成新的props对象(基础数据类型除外),或完成赋值操作后使用ES6拓展运算符生成新的props对象(this.someProps = { ...this.someProps })。
具体更新数据示例
<template>
<div class="update-demo">
<dv-percent-pond :config="config" style="width:200px;height:100px;" />
</div>
</template>
<script>
export default {
name: 'UpdateDemo',
data () {
return {
config: {
value: 66,
lineDash: [10, 2]
}
}
},
methods: {
// 更新数据的示例方法
updateHandler () {
const { config } = this
/**
* 只是这样做是无效
* config指向的内存地址没有发生变化
* 组件无法侦知数据变化
*/
this.config.value = 90
this.config.lineDash = [10, 4]
/**
* 使用ES6拓展运算符生成新的props对象
* 组件侦知数据变化 自动刷新状态
*/
this.config = { ...this.config }
}
}
}
</script>
# 创建Vue项目
组件库依赖vue,要想使用它,创建一个Vue项目当然是必须的,如果已有Vue项目或使用UMD版开发可跳过此步骤。
安装Vue/Cli
- npm安装
npm i -g @vue/cli
- yarn安装
yarn global add @vue/cli
创建Vue项目
vue create datav-project
# 安装
cd datav-project
在Vue项目下进行组件库安装。
- npm安装
npm install @jiaminghi/data-view
- yarn安装
yarn add @jiaminghi/data-view
# 使用
// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
# 按需引入
按需引入仅支持基于ES module的tree shaking,按需引入示例如下:
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)
# UMD版
UMD版可直接使用script标签引入,UMD版文件下载请移步UMD (opens new window),引入后将自动把所有组件注册为Vue全局组件,引入DataV前请确保已引入Vue。
<!DOCTYPE html>
<html>
<head>
<title>DataV</title>
<script src="https://unpkg.com/vue"></script>
<!--调试版-->
<script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script>
<!--压缩版 生产版本-->
<!-- <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.min.vue.js"></script> -->
<style>
html, body, #app {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.border-box-content {
color: rgb(66,185,131);
font-size: 40px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<dv-border-box-1>Welcome to DataV</dv-border-box-1>
</div>
<script>
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
全屏容器 →