[JavaScript知识库]Vue3 封装回到顶部组件

代码：?

<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>