vue中 div高度随另一个div的高度变化
最近做了好几个项目,终于把手里的事情干完了,趁着这几天比较空整理一下最近遇到的一些问题以及解决方案。问题描述:in-wrap的高度不固定,会随着内容的多少改变,而out-wrap的高度则需要跟随in-wrap的变化而变化,代码如下:<div class="out-wrap" id="out-border6"></div><div class="in-wrap">
·
最近做了好几个项目,终于把手里的事情干完了,趁着这几天比较空整理一下最近遇到的一些问题以及解决方案。
问题描述:
in-wrap
的高度不固定,会随着内容的多少改变,而out-wrap
的高度则需要跟随in-wrap
的变化而变化,代码如下:
<div class="out-wrap" id="out-border6">
</div>
<div class="in-wrap">
<div class="text-wrap">
<div class="contain">
<div class="contain3">
<span class="name2" v-for="(item, index) in unit.editorInChief" :key="index" style="width:18%">{{item}}
</span >
</div>
</div>
/div>
</div>
解决方案:
可以使用自定义指令的方式实现这一需求。
首先需要给in-wrap
绑定指令:
<div class="in-wrap" v-resize="resize">
自定义指令:
directives: { // 使用局部注册指令的方式
resize: { // 指令的名称
bind(el, binding) { // el为绑定的元素,binding为绑定给指令的对象
let width = '', height = '';
function isReize() {
const style = document.defaultView.getComputedStyle(el);
if (width !== style.width || height !== style.height) {
binding.value(style.width,style.height); // 关键 绑定函数
}
width = style.width;
height = style.height;
// console.log(height)
}
el.__vueSetInterval__ = setInterval(isReize, 300);
},
unbind(el) {
clearInterval(el.__vueSetInterval__);
}
}
},
指令绑定函数:
resize(a,b){
console.log(a,b)
$("#out-border6").css('height',b)
}
tips
在自定义指令中,是不能使用this去修改data中的值的,正确的做法应该是 使用binding.value.resize()
去绑定一个函数,然后在绑定的函数中去修改data及其他操作。记住要在绑定指令的地方绑上函数:v-resize="resize"
更多推荐
已为社区贡献2条内容
所有评论(0)