强制两个元素具有相同的宽度

Question

我试图强制两个b-buttons（来自Buefy 的按钮组件）保持与其中较宽的一个一样大。

我认为我需要将一个按钮的最小宽度设置为另一个按钮的宽度值。这样一来，如果一个按钮变大，另一个按钮也会变大。

现在，我该怎么做？

我的第一个想法是为每个按钮设置绑定到“最小宽度”样式，如下所示：

<b-button ref="firstButton" type="is-primary" size="is-large"
      :style="{ 'min-width': $refs.secondButton !== undefined ? $refs.secondButton.$el.clientWidth + 'px' : 0 }">
    First Button
</b-button> 

<b-button ref="secondButton" type="is-primary" size="is-large"
      :style="{ 'min-width': $refs.firstButton !== undefined ? $refs.firstButton.$el.clientWidth + 'px' : 0 }">
    Second Button
</b-button> 

但这几乎不起作用，看起来它在页面渲染时工作一次，并且大小的任何变化（例如由于本地化）都会被忽略。看起来$ref 没有反应。

我的第二个镜头涉及一个计算属性，与前一个镜头的想法相同，但不是将样式设置为内联，而是设置为一个计算属性。

但这一次，$ref 元素是未定义的，看起来计算是在设置之前发生的。

如何使两个按钮的宽度相同，而不设置固定值，并且能够随着按钮大小的增加/减小而调整大小？

这是整个代码：

（它只是被英雄部分包围的两个按钮）

<template>
    <div>
        <section class="hero is-primary is-bold is-relative">
            <div class="hero-body">
                <div class="section">
                    <div class="container">
                        <!-- $refs.secondButton !== undefined ? $refs.secondButton.$el.clientWidth + 'px' : 0 -->
                        <!-- $refs.firstButton !== undefined ? $refs.firstButton.$el.clientWidth + 'px' : 0 -->

                        <div class="columns is-centered is-multiline is-mobile">
                            <div class="column is-narrow has-text-centered">
                                <b-button ref="firstButton" type="is-primary" size="is-large"
                                    :style="{ 'min-width': $refs.secondButton !== undefined ? $refs.secondButton.$el.clientWidth + 'px' : 0 }">
                                    First Button
                                </b-button>
                            </div>

                            <div class="column is-narrow has-text-centered">
                                <b-button ref="secondButton" type="is-primary" size="is-large"
                                    :style="{ 'min-width': $refs.firstButton !== undefined ? $refs.firstButton.$el.clientWidth + 'px' : 0 }">
                                    Second Button
                                </b-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    export default {

    }
</script>

<style lang="scss" scoped>
    //All from Buefy and Bulma.
</style>

Answer 1

您不能像那样将样式设置为 ref，因为在 Vue 生命周期中，ref 只有在 mounted 之后才可用。

挂载钩子

可以添加JS代码来改变按钮的宽度

                    <div class="columns is-centered is-multiline is-mobile">
                        <div class="column is-narrow has-text-centered">
                            <b-button ref="firstButton" type="is-primary" size="is-large">
                                First Button
                            </b-button>
                        </div>

                        <div class="column is-narrow has-text-centered">
                            <b-button ref="secondButton" type="is-primary" size="is-large">
                                Second Button
                            </b-button>
                        </div>
                    </div>


  mounted() {
    let firstWidth = this.$refs.firstButton.clientWidth;
    let secondWidth = this.$refs.secondButton.clientWidth;
    if (firstWidth > secondWidth) {
      this.$refs.secondButton.style.width = firstWidth + "px";
    } else {
      this.$refs.firstButton.style.width = secondWidth + "px";
    }
  }

另外，我不确定这一点，但如果 b 按钮的当前显示类型 css 忽略大小设置，您可能需要将 display: inline-block 添加到 b 按钮

b-button {
  display: inline-block;
}

Answer 2

我设法通过创建两个方法解决了这个问题，其中有两个嵌套的 $nextTick() 调用。之后，您只需将方法设置为每个按钮的样式属性。

 <div class="column is-narrow has-text-centered">
     <b-button ref="firstButton" type="is-light" size="is-large"
              :style="{ 'min-width':  getMinWidthFirst() }">
         {{ firstText }}
     </b-button>
 </div>

<div class="column is-narrow has-text-centered">
    <b-button ref="secondButton" type="is-light" size="is-large"
              :style="{ 'min-width': getMinWidthSecond() }">
        {{ secondText }}
    </b-button>
</div>

这里是方法，当文本改变时它们会自动调用：

getMinWidthFirst() {
  var size = this.$refs.secondButton !== undefined
      ? this.$refs.secondButton.$el.clientWidth + 2 + "px"
      : 0;

  this.$nextTick().then(() => {
    this.$refs.firstButton.$el.style.minWidth = 0 + "px";

    this.$nextTick().then(() => {
      this.$refs.firstButton.$el.style.minWidth =
        this.$refs.secondButton.$el.clientWidth + 2 + "px";
    });
  });

  return size;
},
getMinWidthSecond() {
  var size = this.$refs.firstButton !== undefined
      ? this.$refs.firstButton.$el.clientWidth + 2 + "px"
      : 0;

  this.$nextTick().then(() => {
    this.$refs.secondButton.$el.style.minWidth = 0 + "px";

    this.$nextTick().then(() => {
      this.$refs.secondButton.$el.style.minWidth =
        this.$refs.firstButton.$el.clientWidth + 2 + "px";
      });
  });

  return size;
}

对$nextTick 使用两次嵌套调用的想法是，只需一次调用，按钮不会减小文本的宽度。

工作解决方案：

https://codesandbox.io/s/vue-template-r4fp1?file=/src/components/HelloWorld.vue:1679-2622

（展示解决方案的 97KB gif）