TIP 建议在全屏容器内使用百分比搭配flex进行布局,以便于在不同的分辨率下得到较为一致的展示效果。 使用前请注意将body的margin设为0,否则会引起计算误差,全屏后不能完全充满屏幕。<dv-full-screen-container>content</dv-full-screen-container> 点击复制 ← 介绍 Loading加载 → ...
<dv-active-ring-chart :config="config3" style="width:98%;height:98%;" /> </dv-border-box-8> <dv-border-box-8 :reverse="true" :style="{ height: height * 0.23 + 'px',padding:5+'px' }"> <dv-capsule-chart :config="config3" style="width:98%;height:98%;" /> </dv-bo...
看下它的DOM结构,很简单 <templatev-if="ready"><slot></slot></template> AI代码助手复制代码 源码分析 接下来重点看下它的JS实现,它的代码中混入了autoResize.js,所以我们需要两个文件一起看,不然会对突然出现的变量很奇怪。(如果觉得分开不便于阅读,其实我们可以把它合在一起来阅读,是一样的) 梳理下它...
本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue3 hook怎么重构DataV的全屏容器组件”吧! 实现 创建组件 fullScreenContainer.vue <template> <slot></slot> </template> import { useAutoResize } from '@/hooks/useAutoResize' const { autoBindRef } = useAutoResize() 自定义一...
<template><dv-full-screen-containerclass="container"><dv-border-box-1class="border-box"><dv-capsule-chart:config="config7"class="charts"/></dv-border-box-1><dv-border-box-8class="border-box"><dv-scroll-board:config="config2"class="charts"/></dv-border-box-8><dv-border-box-1clas...
</dv-full-screen-container> 1. 2. 3. 4. 我们需要添加一些样式来保证页面边框可以正常显示 <dv-border-box-1 :style="{width:'100%',height:'70%'}">DataV入门案例</dv-border-box-1> 1. 效果图: 更改其他样式 修改代码,只要修改标签就可以有不同的样式,也可以自定义边框颜色啥的 ...
dv-border-box-11></dv-full-screen-container></template>export default {data() {return {config: { //传入组件数据}}}.box1 {width: 610px;height: 310px;}.box{display: flex;justify-content: space-between;width: 98%;margin: auto;padding-top: 40px;} 📓效果如下 📓 后续我们只需要往骨...
因为一个全屏组件,我决定开始去了解datav,这个组件可以自适应屏幕的改变,相较于我们用echarts时写的那种自适应,要强出不少 所以自今天开始,我开始学习datav,今天就先记录一个全屏组件好了 datav自适应全屏组件: <dv-full-screen-container> </dv-full-screen-container>...
接下来就该屏幕适配的问题了,虽然 DataV Vue3 中有全局容器<dv-full-screen-container>,但是官方文档中建议在全屏容器内使用百分比搭配 flex 进行布局,以便于在不同的分辨率下得到较为一致的展示效果。 并且使用前请注意将 body 的 margin 设为 0 ,否则会引起计算误差,全屏后不能完全充满屏幕。我还是倾向于直接使...
<dv-full-screen-container>/dv-full-screen-container> 我们将需要展示的内容放在里面即可 Datav有多种类型组件可供使用,具体可参考文档使用: 边框 带有不同边框的容器 装饰 用来点缀页面效果,增加视觉效果 图表 图表组件基于Charts封装,轻量,易用 其他