在开发过程中,很多时候都会用到动态的计算的样式,比如宽度,高度。特别是开发后台管理系统。
那么首先你务必看Vue的官方文档。涉及到的基础知识有:
文档写的都是基础使用。那么在项目实战中如何使用,2步就能实现,下面提供一个参考方案:
需求场景:获取当前元素宽度,设置container
div的可滚动区域范围。
1.添加样式绑定
div标签内动态绑定::style="{minWidth: resizeWidth}"
<div id="chart_wrapper" ref="chart_wrapper" style="overflow:auto;" >
<div id="svg_container" :style="{minWidth: resizeWidth}" >
<svg width="100%" height="400" ref="svg_wrapper"></svg>
</div>
</div>
2. 浏览器窗口缩放,大小改变时,触发 onresize 事件,然后 获取父级div宽度,设置container
div的可滚动区域范围。
此处实现方案:获取svg流程图里,最右侧圆的横坐标,设置动态resizeWidth值,动态添加滚动条
mounted() {
window.onresize = () => {
let cWidth = this.$refs['svg_wrapper'].clientWidth;
//this.circle为svg画布里,所有圆数据集合数组,遍历查找最右侧圆横坐标值
if(this.circles.length!==0){
//此方法为判断数组对象属性最大值
const maxWidth = Math.max.apply(Math,this.circles.map(item => {
return item.x
}));
if(maxWidth > cWidth){
this.resizeWidth = (maxWidth + 52) + 'px';
}
}
},
3.效果图:当窗口缩放时,如果div宽度小于最右侧circle横坐标,出现滚动条,否则无滚动条