官方文档地址:DataV
1.安装组件库
npm install @jiaminghi/data-view
2.使用
全局引入
// 将自动注册所有组件为全局组件 import dataV from '@jiaminghi/data-view' Vue.use(dataV)
按需引入
按需引入仅支持基于ES module的tree shaking,按需引入示例如下:
import { borderBox1 } from '@jiaminghi/data-view' Vue.use(borderBox1)
3.实现
(1)全屏容器
全屏容器可以根据屏幕比例及当前浏览器窗口大小,自动进行缩放处理。浏览器全屏后,全屏容器将充满屏幕。
<dv-full-screen-container>content</dv-full-screen-container>
注意:使用前请注意将body
的margin
设为0,否则会引起计算误差,全屏后不能完全充满屏幕。
(2)边框
官方文档中给出了边框的使用以及使用效果。
所有边框均支持自定义颜色及背景色,方法如下
<dv-border-box-1 :color="['#0DFFF1','#0E466C']" backgroundColor="blue">dv-border-box-1</dv-border-box-1>
(3)loading加载
<dv-loading>Loading...</dv-loading>
(4)装饰
SVG元素绘制,增强视觉效果,官方文档中有使用效果
所有装饰均支持自定义颜色,方法如下
<dv-decoration-1 :color="['red', 'green']" />
(5)图表
图表组件基于Charts封装,只需要将对应图表option
数据传入组件即可。
<dv-charts :option="option" />