Заставить два элемента иметь одинаковую ширину

Question

Я пытаюсь заставить два b-buttons (компонент кнопки из Buefy) оставаться такими же большими, как и более широкий из них.

Я считаю, что мне нужно установить минимальную ширину одну кнопку на значение ширины другой. Таким образом, если одна кнопка станет больше, другая тоже должна вырасти.

Теперь, как я могу это сделать?

Моим первым шагом было установить привязать к стилю 'min-width' для каждой кнопки, например:

<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

Мне удалось решить проблему, создав два метода с двумя вложенными вызовами $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

(GIF-изображение размером 97 КБ, демонстрирующее решение)

Answer 2

Вы не можете установить стиль на ref таким образом, потому что в жизненном цикле Vue ref будет только доступен после смонтирован .

Вы можете добавить код 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";
    }
  }

И также, я не уверен в этом, но вам может потребоваться добавить display: inline-block к кнопке b, если текущий тип отображения css кнопки b игнорирует настройку размера

b-button {
  display: inline-block;
}