Vue Entertainment 버튼 인스턴스 코드 구현

앞말
본고는 주로 Vue가 복귀 버튼을 실현하는 방법을 소개했는데, 아래의 말은 많지 않으니 코드를 직접 봅시다
인스턴스 코드:

<template>
 <div class="scrollTop">
 <div class="backTop"
   @click="backTop">
  <button v-show="flag_scroll">
      
  </button>
  </div>
  // 
  <div></div>
 </div>
</template> 
<script>
export default {
 name: 'scrollTop',
 data() {
 return {
 
  flag_scroll: false,
  scroll: 0,
 }
 },
 computed: {},
 methods: {
 // 
 backTop() {
  document.getElementsByClassName('scrollTop')[0].scrollTop = 0
 },
 // 200 
 handleScroll() {
  let scrollTop = document.getElementsByClassName('scrollTop')[0]
  .scrollTop
  console.log(scrollTop)
  if (scrollTop > 200) {
  this.flag_scroll = true
  } else {
  this.flag_scroll = false
  }
 },
 },
 mounted() {
 window.addEventListener('scroll', this.handleScroll, true)
 },
 created() { },
}
</script>

<style scoped>
.scrollTop{
 width: 100%;
 height: 100vh;
 overflow-y: scroll;
}
.backTop {
 position: fixed;
 bottom: 50px;
 z-index: 100;
 right: 0;
 background: white;
}
</style>

총결산
Vue의 복귀 버튼 구현에 관한 이 글은 여기까지 소개되었습니다. 더 많은 Vue 복귀 버튼 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!