Как исправить это слово ротатор, которое я создал, Vue копируя логи c из версии, реализованной в Jquery? - PullRequest
Новая
       26

Как исправить это слово ротатор, которое я создал, Vue копируя логи c из версии, реализованной в Jquery?

0 голосов
/ 15 апреля 2020

Здравствуйте, я пытаюсь создать эффект ротатора слова или пишущей машинки с помощью vuejs.

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

 <script>
export default {
  name: "WordRotator",
  props: {
    effect: {
      type: String,
      default: "type"
    },
    words: {
      type: Array,
      default: []
    }
  },
  data: function() {
    return {
      wordIndex: Number,
      letterIndex: Number,
      parentClass: String
    };
  },
  computed: {
    state: vm =>
      vm.parentClass == ""
        ? "typing"
        : vm.parentClass == "waiting"
        ? "waiting"
        : vm.parentClass == "selected"
        ? "selected"
        : "unknown"
  },
  created: function() {
    this.wordIndex = 0;
    this.letterIndex = 0;
    this.parentClass = "waiting";
  },
  mounted: function() {
    var vm = this;
    setTimeout(vm.hideWord, 2500);
    console.log("mounted " + vm.parentClass);
  },
  updated: function() {
    var vm = this;
    console.log("updated " + vm.parentClass);

    if (vm.state == "typing") {
      setTimeout(vm.showWords, 150);
    } else if (vm.state == "selected") {
      setTimeout(function() {
        vm.letterIndex = 0;
        vm.wordIndex = vm.wordIndex == vm.words.length - 1 ? 0 : vm.wordIndex + 1;
        vm.parentClass = "";
      }, 500);
    } else if (vm.state == "waiting") {
      setTimeout(vm.hideWord, 2500);
    }
  },
  methods: {
    hideWord: function() {
      var vm = this;
      vm.parentClass = "selected";
    },
    showWords: function() {
      var vm = this;
      console.log(`Typing ${vm.letterIndex} letter of ${vm.wordIndex} word.`);
      vm.letterIndex = vm.letterIndex + 1;

      // end of word -> switch word
      if (vm.words[vm.wordIndex].split("").length == vm.letterIndex - 1) {
        vm.parentClass = "waiting";
      }
    },
    hideLetter: function() {},
    showLetter: function(letter, word, bool, duration) {}
  },
  render: function(createElement) {
    var vm = this;

    return createElement(
      "div",
      {
        class: `word-rotator letters ${vm.effect}`
      },
      [
        createElement(
          "span",
          {
            class: `word-rotator-words ${vm.parentClass}`
          },
          [
            ...vm.words.map((word, idx) => {
              var letters = word.split(""),
                selected = idx == vm.wordIndex;
              return createElement(
                "b",
                {
                  class: selected ? "is-visible" : "is-hidden",
                  style: "opacity: 1"
                },
                letters.map((letter, index) => {
                  return createElement(
                    "i",
                    {
                      class: selected && index <= vm.letterIndex ? "in" : "out"
                    },
                    [letter]
                  );
                })
              );
            })
          ]
        )
      ]
    );
  }
};
</script>

<style>
</style>

Это вроде работает, но не так плавно, как оригинал. Я новичок в vue и реактивности. Итак, как говорится в моей логике c, я пытаюсь изменить состояние в определенные моменты времени и итерации. Но не уверен, насколько интенсивно этот процесс по сравнению с jquery эквивалентом. Не уверен, насколько реально реагировать на каждой итерации, чтобы обработать vue компонент, чтобы отразить изменения.

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

Это правильный путь, как мне подходить к этим итеративным и последовательным изменениям поведения в vue.

...