Как сделать полосу прокрутки на модальных работах в Vuejs?

Question

У меня есть модал с индикатором прогресса, который должен показывать прогресс при прокрутке.

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

<template>
 <div ref="progressbar"> .....</div>
</template>

<script>
methods: {
   chceckScrollBar () {
      const element = this.$refs.progressbar
      const clientHeight = element.clientHeight
      const scrollHeight = element.scrollHeight
      const scrollTop = element.scrollTop
      const res = (scrollTop / (scrollHeight - clientHeight)) * 100
      if (scrollHeight <= clientHeight) {
        this.percentage = 100
      } else {
        this.percentage = res.toFixed(2)
      }
   }
}


 created() {
    this.$refs.progressbar.addEventListener('scroll', this.chceckScrollBar )
  },
  beforeDestroy () {
    this.$refs.progressbar.removeEventListener('scroll',this.chceckScrollBar )
  }
</script>

Answer 1

Да, вы должны использовать метод mounted для добавления прослушивателя события прокрутки. Пример на codepen . Но проблема в том, что добавление прослушивателя событий js не является способом . Вам нужно использовать v-on:scroll="chceckScrollBar" для вашего элемента. Зачем? on:scroll всегда вызывается, когда пользователь прокручивает элемент.

шаблон

<div id="app-vue">
   <template>
     {{percentage}}
     <div class="modal" ref="progressbar"> Hello 
       <br>
         ....
       <br></div>
  </template> 
</div>

Css

.modal {
  width:200px;
  max-height:300px;
  overflow-y: scroll;
  background-color:green;
}

Вю

let vm = new Vue({
  data() {
    return {
      percentage:0,
    };
  },
  methods: {
   chceckScrollBar () {
      const element = this.$refs.progressbar
      const clientHeight = element.clientHeight
      const scrollHeight = element.scrollHeight
      const scrollTop = element.scrollTop
      const res = (scrollTop / (scrollHeight - clientHeight)) * 100
      if (scrollHeight <= clientHeight) {
        this.percentage = 100
      } else {
        this.percentage = res.toFixed(2)
      }
   }
},

 mounted() {
    this.$refs.progressbar.addEventListener('scroll', this.chceckScrollBar );
  },
  beforeDestroy () {
    this.$refs.progressbar.removeEventListener('scroll',this.chceckScrollBar );
  },
  el: '#app-vue'
})

Answer 2

Вам нужно будет поместить свой Eventlistener в смонтированный метод, так как ссылка еще не существует в созданном

mounted() {
    this.$refs.progressbar.addEventListener('scroll', this.chceckScrollBar )
}