Javascript.RU

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

Событие язык изменился vue cli + i18n
Здравствуйте, я пытаюсь используя
watch: {
    "$i18n.locale": () => {
      document.getElementById("nav").parentElement.style.width =
        document.getElementById("nav").scrollWidth+"px";
    },
  },
получить длинну div с переведенным словом, однако похоже перевод осуществляется асинхронно и я ловлю длинну ище не переведенного слова, существует ли событие что документ переведен
Ответить с цитированием
  #2 (permalink)  
Старый 19.04.2021, 10:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

fori,

setTimeout с нулевой задержкой
Ответить с цитированием
  #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.
Ответить с цитированием
  #4 (permalink)  
Старый 19.04.2021, 12:28
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Полный код компонента
Вложения:
Тип файла: txt Auth.vue.txt (9.8 Кб, 2 просмотров)
Ответить с цитированием
  #5 (permalink)  
Старый 19.04.2021, 12:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

Сообщение от рони Посмотреть сообщение
а код?
Из файла-полного кода я вырезал
watch и id="nav" так как они ведут себя странно. Сейчас полный код работает стабильно но без анимации ширины при изменении длинны слов.
Обрезаный код просто ведет себя странно (scrollWidth от id="nav" некоректно считаются) при изменении языка...
Суть в анимированом уменшении-увеличении длинны родительского елемента с [class="frame"]
Ответить с цитированием
  #7 (permalink)  
Старый 19.04.2021, 20:31
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Во первых: для получения nav используйте ref. Во-вторых: nextTick.
__________________
29375, 35

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

Позвольте спросить в каком контексте нужно вызвать $nextTick
watch: {
    "$i18n.locale": () => {
      this.$nextTick(() => { //now this = undefined // if procces.$nextTick isn't working too
        alert("nextTRick");
      });
    },
  },
Ответить с цитированием
  #9 (permalink)  
Старый 19.04.2021, 23:45
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Не используйте стрелки если не знаете как они работают.
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие изменения языка vue cli + i18n fori Javascript под браузер 0 18.04.2021 05:47
this.data не работает в vue cli fori Javascript под браузер 10 28.03.2021 21:17
vue cli, как маштабировать размер компонента под каждую страницу fori Javascript под браузер 2 24.03.2021 22:33
что такое defineComponent (vue cli) fori Javascript под браузер 1 22.03.2021 20:46
Не всплывает событие в Vue micscr Библиотеки/Тулкиты/Фреймворки 2 28.05.2020 08:43