Vue3 回到顶部

时间:2022-05-28 柒个M 人气:11

我们在网页中应该经常可以看到回到顶部这个功能,这个功能也比较简单。

代码：

<template>
  <div class="page-content-scroll">
    <el-backtop
        target=".page-content-scroll"
    >
    </el-backtop>
    <slot></slot>
  </div>
</template>
 
<script>
export default {
  name: "index"
}
</script>
 
<style scoped lang="scss">
.page-content-scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
}
 
</style>

使用：

<template>
  <back-top>
    <router-view/>
  </back-top>
 
</template>
 
<style lang="scss">
</style>

<template>
  <div>
    <h1>{{ name }}</h1>
    <div id="panels"></div>
  </div>
</template>
 
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
 
const name: string = ref('Lisa')
 
onMounted(() => {
  const fragmentArr = document.createDocumentFragment()
  const parentNode = document.getElementById('panels')
 
  for (let i = 0; i < 200; i++) {
    const elementP = document.createElement('p')
    elementP.innerText = '测试' + i
    fragmentArr.appendChild(elementP)
  }
  parentNode.appendChild(fragmentArr)
 
})
 
 
</script>
 
<style scoped>
 
</style>

加载全部内容