我有一个 Vue 组件,它使用引导网格。在子组件中,我想获取控制器中某个 div 的当前宽度。
这是子组件:
<template>
<div id="bg-prev" ref="prev">
<h1>{{x}}</h1>
</div>
<template>
export default {
props: ['section'],
data() {
return {
x: 0,
y: 0,
}
},
mounted() {
this.getWindowWidth();
},
methods: {
getWindowWidth() {
this.x = this.$refs.prev.clientWidth;
}
}
};
<style>
#bg-prev {
width: 100%;
}
</style>
在这个例子中,宽度将始终为 0,即使当我检查该元素时该元素具有明确的宽度。我在这里缺少什么,安装的钩子是 vue 生命周期中最新的钩子,对吧?任何帮助表示赞赏;)
除了一些拼写错误之外,代码运行良好。 (缺少结束模板标签)
不需要额外的钩子。唯一的例外是,如果您在组件的安装方法中切换组件的渲染。然后你会使用类似的东西
const that = this
that.showDiv = true
that.$nextTick(function () {
that.getWindowWidth()
})
您确定它的父级在安装期间有宽度吗? 100% 的 0px 仍然是 0px。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)