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>

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

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

- Bargain23

Answer 1

getBannerStyle不会成为响应式的，因为您在其中没有访问任何其他响应式属性。您需要将偏移宽度值分配给数据属性，并在getBannerStyle中引用该属性。类似下面的代码应该可以解决此问题：

mounted () {
  this.offsetWidth = document.getElementById('banner-container').offsetWidth
},
data () {
  return {
    offsetWidth: 0,
  }
},
computed: {
    getBannerStyle () {
        return `width: ${this.offsetWidth}px;`
    }
}

- user320487

---

宽度仍然为0像素。 - Bargain23

@Bargain23，那用created代替mounted怎么样？ - Jack jdeoel

@DavidJorHpan 仍然是0。或者，我应该如何在CSS中实现这个？ - Bargain23

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
    }
  }

- Stefan Fabian