javascript - 在vue js中设置div的高度
问题描述
我正在使用 vue js。我想使用纯 javascript 根据另一个 div 高度设置一个 div。我面临的问题是我无法使用纯 java 脚本设置高度。但我可以使用 jquery 设置它。谁能帮我把这个 jquery 改成 javascript 。给出了我正在使用的代码
Vue.nextTick(function () {
var offsetHeight = document.getElementById('filterSection').offsetHeight;
$(".searchResultSection").css("max-height",`calc(100% - ${offsetHeight}px)`);
});
我需要将 jquery 部分更改为 java 脚本。
解决方案
事实上,computed properties
(https://vuejs.org/v2/guide/computed.html#Computed-Properties)是解决您的问题的完美选择:
声明一个将返回 filterSectionHeight的计算属性
export default {
name: "App",
computed: {
filterSectionHeight() {
const filterSectionDOM = document.getElementById("filterSection");
return filterSectionDOM ? filterSectionDOM.offsetHeight : 0;
},
}
};
定义您的 divfilterSection
并searchResultsSection
在您的组件(或 App 组件)中,不要忘记添加一个:style
属性来处理模板中max-height
提供的动态.searchResultsSection
<div id="filterSection"></div>
<div class="searchResultsSection"
:style="{
'max-height': `calc(100% - ${filterSectionHeight}px)`
}">
</div>
在你的 CSS 中将每个 div 的高度设置为 100%
#app {
height: 600px;
width: 100%;
}
#filterSection {
height: 100%;
background: rebeccapurple; //https://en.wikipedia.org/wiki/Eric_A._Meyer
}
.searchResultsSection{
height: 100%;
background: rebeccapurple;
opacity: 0.6;
}
您将在此处找到完整的演示 > https://codesandbox.io/s/1rkmwo1wq
推荐阅读
- python-requests - 如果 response.status 代码为 429,我应该引发什么错误?
- macos - 是否有独立于平台的方法来打开 Outlook 插件中的链接?
- powerbi - 为什么我的 dax 过滤器显示不在过滤器中的空值而不是隐藏它们?
- typescript - 在打字稿中省略从不类型
- wordpress - 背景视频 - 最佳帧大小/帧速率/编解码器/文件大小是多少?
- android - 使用 detectLeakedClosableObjects() 访问房间数据库时,Android 8 及更低版本上的 StrictMode 崩溃
- c# - 这个 PostEvictionCallback 什么时候会被调用?
- javascript - 如何以编程方式打开单选按钮
- c++ - 是否可以在多台计算机上分配一个进程的 cpu?
- dotnetbrowser - 如何通过 teamdev 将 pfx 证书添加到 dotnetbrowser