vue.js - 在 VueJS 中如何确定模板中元素的元素宽度

Question

我有一个 VueJS 应用程序，它在容器 div 中创建两个 div，它们使用 display:flex 布局，如下所示:

 +-------------------------------------------+
 | div#app                                   |
 | +---------------------+ +---------------+ |
 | |                     | |               | |
 | |       div.a         | |     div.b     | |
 | |                     | |               | |
 | +---------------------+ +---------------+ |
 |                                           |
 +-------------------------------------------+

在 div.a 里面是一个 svg 元素，它也是由 Vue 生成的。

我需要知道 div.a 的宽度尺寸才能生成合适的 SVG。有什么想法可以解决这个问题吗？

Answer 1

您必须等到组件呈现后，然后使用 $refs 获取对元素的引用。这是一个例子:

new Vue({
  el: '#app',
  
  mounted () {
    const divA = this.$refs.divA
    
    console.log('inner width is: ' + divA.clientWidth)
  }
})

.ct {
  border: 1px solid red;
  display: flex;
  height: 40px;
  padding: 10px;
}

.a {
  border: 1px solid green;
  flex: 1;
}

.b {
  border: 1px solid blue;
  flex: 2;
}

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <div class="ct">
    <div class="a" ref="divA"></div>
    <div class="b"></div>
  </div>
</div>

请注意，这不会跟踪尺寸调整，您需要在尺寸发生变化时再次测量。