Vue - 设置元素的宽度等于另一个元素的宽度

Question

我尝试使用Vue动态设置最内层元素的宽度等于最外层元素的宽度：

<div id="banner-container" class="row">
    <div class="col-xs-12">
        <div class="card mb-2">
            <div class="banner banner-tag card-body" :style="getBannerStyle"></div>
        </div>
    </div>
</div>

我在Vue中有以下代码和计算属性：

var container = document.getElementById('banner-container').offsetWidth;
...
computed: {
    getBannerStyle () {
        return 'width: ' + container + 'px;';
    }
}

Answer 1

getBannerStyle不会被动反应，因为您不会访问其中的任何其他反应属性。您需要为offsetWidth值分配一个数据属性，并在mounted () { this.offsetWidth = document.getElementById('banner-container').offsetWidth }, data () { return { offsetWidth: 0, } }, computed: { getBannerStyle () { return `width: ${this.offsetWidth}px;` } } 内引用该属性。这样的事情应该有效：

{{1}}

Answer 2

不幸的是，在纯 Vue 中几乎不可能做到这一点，因为元素在任何生命周期挂钩期间可能还没有大小。特别是，如果该元素在页面加载时不是立即可见的。幸运的是，所有现代浏览器都有一个可以提供帮助的类：ResizeObserver。

  data: () => ({
    offsetWidth: 0,
    resizeObserver: null
  }),
  mounted() {
    this.resizeObserver = new ResizeObserver(this.onResize)
    this.resizeObserver.observe(document.getElementById('banner-container'))
    this.onResize()
  },
  beforeUnmount() {
    this.resizeObserver.unobserve(document.getElementById('banner-container'))
  },
  methods() {
    onResize() {
      this.offsetWidth = document.getElementById('banner-container').offsetWidth
    }
  }