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

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

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

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

干脆就直接找源码看下了，看能不能找到答案，这个边框组件其实是：最外层有个容器，然后里面svg画出来的线，然后还有跟svg同级一个div作为插槽，就是我们在边框组件内部写的内容，然后js代码部分确实有个initWH方法，先贴下源码：

可以看到initWH方法中的 this.width 和 this.height 就是我们的svg对应的宽高，也就是我们没有自适应的宽高！然后就试着在initWH中打印看下这个 this.width 和 this.height 和 dom，从initWH方法中可以看出这个width和height其实就是我们的父容器的宽高，打印出来之后发现dom的宽度（最外层的div就是类名位dv-border-box-8）已经变了，但是把dom.clientWidth和dom.clientHeight赋值给我们的this.width和this.height（就是我们的svg的宽高），发现赋上去的值还是改变之前的值！！这就奇怪了，后来换个思路，想了一下菜单展开收缩的时候是不是有一定的时间，但是多少时间我们控制不了，也不确定，所以是不是还没收缩展开完成我们就去拿dom元素的宽高赋值了，所以我在这加了个setTimeout 延迟5000再赋值：

initWH (resize = true) {console.log('触发 initWH----->>>')const { $nextTick, $refs, ref, onResize } = thisreturn new Promise(resolve => {$nextTick(_ => {const dom = this.dom = $refs[ref]setTimeout(() => {this.width = dom ? dom.clientWidth : 0this.height = dom ? dom.clientHeight : 0}, 5000)if (!dom) {console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')} else if (!this.width || !this.height) {console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')}if (typeof onResize === 'function' && resize) onResize()resolve()})})
},

发现确实是可以自适应！这基本就可以确认原因了，就是我们菜单收缩的时候，是有一定时间的，我们要等到菜单收缩完成之后再拿dom元素赋值给我们的svg宽高，经过测试我们把延迟写到300毫秒就可以了。

最终结论就是：

如果是一般情况下，我们都不需要调用initWH方法，默认宽高也是100% * 100%，并且监听了window的resize方法，重置宽高。
特殊情况下，可以选择调用initWH方法重置宽高，但是一定是得等dom元素更新完成之后再去调用，要不然拿到的宽度也不是最终变化完的宽高，导致不能自适应，就像我这个例子，菜单展开收缩的时候，我们要延迟一会儿再去调用initWH就可以了

我这个例子最终的解决方案就是，监听菜单展开收缩的变化，当改变的时候延迟3秒调用initWH方法就可以了！

<template><div class="home"><div class="lt"><div class="branch"></div><div class="branch"></div><div class="branch"></div></div><div class="cen"><div class="cen-top"><dv-border-box-8 ref="borderBox"> </dv-border-box-8></div><div class="cen-bot"></div></div><div class="rt"><div class="branch"></div><div class="branch"></div><div class="branch"></div></div></div>
</template>
<script>
export default {computed: {isCollapse() {return this.$store.state.common.isCollapse;}},watch: {isCollapse() {setTimeout(() => {this.$refs.borderBox.initWH()}, 300)}}
}
</script>

最终效果图：

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

【Android 内存优化】自定义组件长图组件 ( 获取图像宽高 | 计算解码区域 | 设置图像解码属性复用像素格式 | 图像绘制 )
文章目录一.获取图像真实宽高二.计算解码区域三.设置解码参数内存复用像素格式四.图像绘制五.执行效果六.源码及资源下载官方文档 API : BitmapRegionDecoder 在 ...
Vue中获取dom元素的宽高
vue中获取dom元素的宽高 template模板中给dom绑定ref: <el-carouselid="ailabelmap"ref="remarkCarusel ...
vue项目中，上传图片做像素大小宽高的限制
vue项目中,上传图片做像素大小宽高的限制 <el-uploadclass="avatar-uploader"action="http://upload.qiniu ...
php正则去掉width=,关于php使用正则去除宽高样式的方法
因工作需要,需要采集html,并把html内容保存到数据库中.为了避免影响使用,宽高样式需要删除.例如图片和p中的width, height等. 不过采集到的html中,样式的写法各有不同,例如大小写 ...
mysql用户权限重置_mysql中重置密码与新用户权限分配的方法介绍
本篇文章给大家带来的内容是关于mysql中重置密码与新用户权限分配的方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.重置root密码 1.修改配置文件,免密登陆输入命令 ...
Flutter中Contrainer 组件的宽高限制分析
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程掘金 EDU学院教程知乎 Flutter系列文章头条同步百度同步本 ...
修改源码实现小程序UI库iview weapp的modal组件自定义宽高
记一下小程序端UI库iview weapp的modal模态窗自定义样式修改因为项目需要在模态窗中显示内容,小程序端的iview没有类似popup这种的弹出框,所以就选择了modal对话框来承载弹出内 ...
切换组件echarts宽高不正常，100%变成100px问题
遇到一个问题,使用v-show,做echarts的切换,发现只有第一个正常,后续的图表设置的100%都不生效,只能硬编码写死宽高才行,显然不是很好.在网上查阅之后发现主要是display导致的.dis ...
android获取该控件在屏幕,android获取屏幕宽高与获取控件宽高(三种方法)
1.获取屏幕宽高方法1: int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽(像素,如:480px ...

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

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

最新文章

热门文章