Vue+Carbon中如何根据按钮位置动态切换左/右对齐？

备选方案：JS辅助的Grid布局（适合高精度场景） #

如果需要更精确控制换行时机，可以通过Vue计算文本和按钮的宽度，动态调整Grid布局：

<script>
export default {
  mounted() {
    this.calculateWidths()
    window.addEventListener('resize', this.calculateWidths)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.calculateWidths)
  },
  methods: {
    calculateWidths() {
      const textEl = document.querySelector('.dynamic-text')
      const btnEl = document.querySelector('.some-button')
      if (textEl && btnEl) {
        document.documentElement.style.setProperty('--text-width', `${textEl.offsetWidth}px`)
        document.documentElement.style.setProperty('--btn-width', `${btnEl.offsetWidth}px`)
      }
    }
  }
}
</script>

<style>
.text-button-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min-content;
  gap: 1rem;
  align-items: center;
  padding-bottom: 2rem;
}

/* 当容器宽度小于文本+按钮总宽度时，切换为单列布局 */
@media (max-width: calc(var(--text-width) + var(--btn-width) + 1rem)) {
  .text-button-container {
    grid-template-columns: 1fr;
  }
}
</style>

这个方案需要JS实时计算元素宽度，适合对布局精度要求极高的场景，但实现复杂度更高，优先推荐Flexbox方案。

内容的提问来源于stack exchange，提问作者KHP