dataV中重置边框组件的宽高的initWH方法的使用

已于 2022-09-29 17:53:54 修改
阅读量1.3w 收藏 24
点赞数 8
分类专栏： vue 数据可视化 文章标签： vue.js elementui
于 2022-09-29 17:52:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51431448/article/details/127110340
版权

先说下我遇到的情况，项目就是很经典的后台管理系统，菜单在左侧，并且可以收缩，首页是个可视化页面，用到了dataV边框组件，但是收缩菜单的时候问题出现了，边框无法自适应父容器，下面是效果图：

可以很明显的看出来，当我们收缩菜单的时候，中间的dataV边框并没有自适应容器，展开的时候又超出了容器的宽度，所以bug就来了，为了解决百度找了好多资料，但基本上都是说使用组件内部的initWH方法重置组件的宽高，官网也确实有说 

 

 但我加上就是不起作用！！ 

干脆就直接找源码看下了，看能不能找到答案，这个边框组件其实是&#x

了解本专栏 订阅专栏 解锁全文 超级会员免费看
会说法语的猪
关注
  • 8
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
专栏目录
订阅专栏
数据可视化datav使用教程文档1
weixin_45818290的博客
08-24 4812
datav数据可视化大屏使用教程文档
Vue 重置组件到初始状态的方法示例
10-17
主要介绍了Vue 重置组件到初始状态的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
dataV组件容器宽高发生变化后，组件不会自适应解决方法
热门推荐
y_w_x_k的博客
10-15 1万+
项目中需要大屏幕数据展示，于是使用了dataV组件，但是使用是发现拖动浏览器边框，dataV组件显示异常，如图: 于是查了官网,官网的解释如下: 于是按照官网的意思编写代码: <dv-active-ring-chart ref="pie2" :config="config" :key="key" class="datav-item" /> return { pieOutline: '', key : 1, } methods: { .
使用DataV组件库的dv-full-screen-container组件报错：DataV: Component width or height is 0px......
最新发布
gluttony_coder的博客
07-02 539
这个错误提示是因为你在使用DataV组件库的dv-full-screen-container组件时，该组件的宽或高被设置为0，这可能导致组件渲染异常。为了解决这个问题，你需要确保dv-full-screen-container组件的宽和高都被正确设置。在这个例子中，我将组件的宽设置为100%，高设置为100%。这样应该可以解决你的问题。如果你仍然遇到问题，你可能需要检查你的CSS样式是否影响了组件的宽和高。
Vue3 dataV 使用initWH()解决因使用边框造成组件宽高异常的问题 - 附完整示例
m0_48968874的博客
06-10 656
DataVDataVVue 大屏数据展示组件库。
DataV中使用initWH方法防止边框内的组件重新渲染失效
weixin_55726815的博客
09-04 434
很多管理系统的标题旁边都包含着展开收缩左侧的menu，造成边框不能自适应的情况，这就需要使用initWH方法重置边框。watch监听菜单栏的展开与否。因为是四个边框，所以。分别给四个边框都加了ref（还没找到其他简便的方法！，加上重置这个方法就ok了！Vue 大屏数据展示组件库。二、使用边框遇到的问题。介绍 | DataV。
DataV 自定义边框样式 轮播表hover效果 数字翻牌器
qq_50187801的博客
11-23 1017
DataV+element UI 自定义边框样式 轮播表hover效果 数字翻牌器 进度条
【解决子组件页面变动时不影响父组件的页面大小的边框】
TWenYuan的博客
02-06 251
父组件使用自定义事件；@resize-border=“resizeBorder”解决子组件页面变动时不影响父组件的页面大小的边框。父组件采用dataV做边框。
datagridvie设置行高列宽_datagridview基本设置和用法以及插入图片
weixin_39837139的博客
12-21 281
找得太辛苦了，这里整理一下this.dataGridView1.DataSource = null;// this.dataGridView1.Refresh();this.dataGridView1.Columns.Clear();this.dataGridView1.ReadOnly = true;this.dataGridView1.ColumnHeadersVisible = false;...
父组件调用子组件方法-useRef
zm_miner的博客
06-14 2357
以前写过一篇父组件调用子组件方法的文章, 当时是在class类组件中, 使用onRef 本篇文章中使用useRef 实现父组件调用子组件方法 实现的功能是父组件的按钮点击清空表单 则清空子组件中的input中的内容 上代码 parent.js import React, { createRef, useRef, useEffect } from 'react'; import { Button } from 'antd' import Child from './child' const Parent =
【vue】三种方法重置vue组件的data数据
A_soulmate的博客
01-11 9640
我们在vue组件中经常遇到需要重置表单的场景，需要重置data中的对象
html中多个div如何使边框重合,css 中多种边框的实现小窍门
weixin_39577052的博客
06-17 3486
一、多重边框背景知识：box-shadow，outline鉴于使用场景的多元化，多重边框的设计越来越多，以往可以借助 border-image 属性应付一下，但是这个在css 代码层面并不是很灵活。现在我们借助 box-shadow 和 outline 两个属性来分别实现多重边框。1、box-shadow 方案思路：利用 box-shadow 的第四个参数(扩张半径)的大小，多重投影代码示例：多重...
datagridvie设置行高列宽_DataGridView行高、列宽选择 | 学步园
weixin_39852953的博客
12-21 121
应用场景：显示数据绑定情况下如果想看每列全部文字后恢复默认列宽。private void 显示行列控制(){this.Invoke(new Action(() =>{详情查编.AutoSizeRowsMode = (显示行自动.Checked) ? DataGridViewAutoSizeRowsMode.AllCells : DataGridViewAutoSizeRowsMode.Non...
dataV中改变dv-border-box-8的环绕线条宽度
weixin_47803327的博客
09-26 994
dataV动画库中dv-border-box-8环绕边框线的宽度修改
DataV中边框组件不生效解决方案
往事随风
10-18 2598
DataV中边框组件不生效解决方案
datav
RumbleWx的博客
08-16 409
数据尚未加载完成时，可以显示Loading效果，增强用户体验。进行布局，以便于在不同的分辨率下得到较为一致的展示效果。设为0，否则会引起计算误差，全屏后不能完全充满屏幕。边框组件默认宽高均为100%建议在全屏容器内使用。...
Vue大屏可视化自适应（可预览）
派大星的博客
09-22 7000
autoResize.js Resize.vue 最后在需要用的地方引入(页面中正常使用px即可) 查看demo
cloudlare组件中reset方法的使用
04-27
Cloudflare是一个Web性能和安全公司，它提供了许多云服务组件，包括CDN、DNS、防火墙等等。 在Cloudflare的组件中，reset方法用于重置缓存。当您的网站上的内容更改时，您可能需要清除Cloudflare缓存以确保新内容被正确地显示。重置缓存是指清除Cloudflare的缓存，使Cloudflare强制从源服务器获取最新的内容。这可以通过调用reset方法来完成。 reset方法可以在Cloudflare的API中使用，也可以在Cloudflare的控制台中手动触发。在API中，您可以使用以下命令调用reset方法： ``` curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \ -H "X-Auth-Email: {email}" \ -H "X-Auth-Key: {key}" \ -H "Content-Type: application/json" \ --data '{"purge_everything":true}' ``` 其中，{zone_id}是您的Cloudflare帐户中的区域ID，{email}和{key}是您的Cloudflare API密钥。 需要注意的是，reset方法将清除整个缓存，而不仅仅是特定文件或页面的缓存。在使用reset方法之前，请确保您已经备份了所有重要的数据，以免数据丢失。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会说法语的猪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值