Показать сообщение отдельно
  #3 (permalink)  
Старый 19.04.2021, 12:21
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Спасибо, но к сожалению не получилось((
У меня язык меняет другой компонент, а здесь все не коректно ловится scrollWidth...
Пример минимального кода проблеммы
<i18n>
{
  "en": {
    "SIGN_IN": "SIGN",
    "SIGN_UP": "SIGN",
    "RESTORE": "RESTORE"
  },
  "ru": {
    "SIGN_IN": "ВОЙТИ",
    "SIGN_UP": "РЕГИСТРАЦИЯ",
    "RESTORE": "ВОСТАНОВИТЬ"
  }
}
</i18n>

<template>
  <div class="frame">
    <div class="nav" id="nav">
      <label>
        <input type="radio" name="auth" />
        <span>
          {{ $t("SIGN_IN") }}
        </span>
      </label>
      <label>
        <input type="radio" name="auth" />
        <span>
          {{ $t("SIGN_UP") }}
        </span>
      </label>
      <label>
        <input type="radio" name="auth" />
        <span>
          {{ $t("RESTORE") }}
        </span>
      </label>
    </div>
  </div>
</template>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.frame {
  display: flex;
  flex-direction: column;

  background: green;

  .nav {
    display: flex;
    padding: 7vmin 5vmin;

    label {
      font-size: 2.5vmin;
      margin: 0 1vmin;
      transition: opacity 0.2s ease;
    }
  }
}
</style>

<script>
export default {
  name: "Auth",

  watch: {
    "$i18n.locale": () => {
setTimeout(() => {
let b = /*здесь странности*/
        (100 * document.getElementById("nav").scrollWidth) / getMinSide() +
        "vmin";
      document.getElementById("nav").parentElement.style.width = b;
});
    },
  },
};
function getMinSide() {
  if (
    document.documentElement.clientWidth < document.documentElement.clientHeight
  ) {
    return document.documentElement.clientWidth;
  } else {
    return document.documentElement.clientHeight;
  }
}
</script>

Расчет длинны при смене языка ведет себя не коректно...

Последний раз редактировалось fori, 19.04.2021 в 13:06.
Ответить с цитированием