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>

到此这篇关于Vue3 封装回到顶部组件的实现示例的文章就介绍到这了,更多相关Vue3 回到顶部内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue.js实现回到顶部动画效果

    最近使用vue.js做了几个页面,其中有一个回到顶部的动画效果记录下. html如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>回到顶部</title> <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV=

  • vue router 跳转后回到顶部的实例

    在main.js中加上这段代码 // 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); }) 以上这篇vue router 跳转后回到顶部的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue实现回到顶部和底部动画效果

    Vue实现回到顶部和底部动画效果

    本文实例为大家分享了Vue实现回到顶部和底部动画效果的具体代码,供大家参考,具体内容如下 代码: <template> <div> <div class="scroll" :class="{show:isActive}"> <div id="toTop" @click="toTop(step)"><</div> <div id="toBottom

  • Vue3 封装回到顶部组件的实现示例

    Vue3 封装回到顶部组件的实现示例

    我们在网页中应该经常可以看到回到顶部这个功能,这个功能也比较简单. 代码: <template> <div class="page-content-scroll"> <el-backtop target=".page-content-scroll" > </el-backtop> <slot></slot> </div> </template> <script>

  • JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

    JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

    现在网上的回到顶部组件,懂不懂就一大段让人看不懂javascript代码,还各种不兼容.起始这个组件,完全可以自己利用javascript的滚动事件window.onscroll与position:fixed手写.IE6的兼容性问题主要出现在position:fixed上面,如何解决已经在<[CSS]IE6中的position:fixed问题与随滚动条滚动的效果>(点击打开链接)介绍过了. 下面具体说说如何利用JavaScript中的滚动事件window.onscroll实现这个回到顶部组件.

  • angularJS 指令封装回到顶部示例详解

    关于angularJS如何回到顶部,还是直接code吧! 1.构建指令,使用registerDirective构建指令添加到内部的hasDirectives对象内,以方便后面在全局查找指令的时候进行匹配. /** **回到顶部 **/ define(["app"], function (app) { app().registerDirective("backToTop", function () { return { restrict: "E",

  • 微信小程序自定义顶部组件customHeader的示例代码

    1.开启配置自定义顶部 { "window": { "navigationStyle":"custom" } } 在app.json的文件window配置"navigationStyle": "custom"属性即可 2.自定义顶部计算原理 2.1 获取系统状态栏的高度和屏幕宽度 使用wx.getSystemInfo这个函数获取系统状态栏的高度和屏幕宽度. 2.2 获取右上角胶囊位置信息 使用wx.getM

  • 原生JS实现平滑回到顶部组件

    原生JS实现平滑回到顶部组件

    返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置. 实现思路也很容易,只要改变document.documentElement.scrollTop或document.body.scrollTop的值即可. 本文抛弃所有加速减速的酷炫效果,回归软件的本质,提供一个最简洁的实现,只追求实用性,不追求所谓的用户体验,效果如下 由于思路跟代码都很简单,所以就直接贴出实现细节了: var BackTop = function

  • Angular 封装并发布组件的方法示例

    Angular 封装并发布组件的方法示例

    一.封装组件 作为入门,这是一个非常简单的demo,但核心的接收使用者的输入@Input(),以及返回数据给使用者@Output()都实现了,所以有一定的借鉴意义. 目录结构:(部分目录不是框架中自动生成,二是后期添加,按照步骤进行即可.) 具体代码: html:(search.component.html) <input type="text" class="form-control" #info placeholder="{{informatio

  • vue3封装自己的分页组件

    vue3封装自己的分页组件

    本文实例为大家分享了vue3封装自己分页组件的具体代码,供大家参考,具体内容如下 背景 在浏览列表类型的数据的时候,如果数据比较多一次性全部请求会出现性能损耗以及加载延迟等问题,那么此时分页组件就起到了关键作用,它可以只请求一部分数据,也不会占用太多的页面空间,想看别的数据可以通过页码的改变来发起请求,刷新页面数据 现在我们自己来封装分页组件 组件所需参数 total 属性 :用来传递数据总条数 pagesize 属性 :每页展示几条数据 currentPage 属性 :当前默认页码 chang

  • vue3 封装自定义组件v-model的示例

    vue3 封装自定义组件v-model的示例

    首先要注意 vue3中 v-model 默认绑定的变量名变了,从原理的 value 改成了 modelValue,如果要改变变量的值,要执行一个事件 this.$emit("update:modelValue", value); <template> <div class="inline"> <input :type="password ? 'password' : 'text'" ref="input&q

  • 使用Vue3实现一个Upload组件的示例代码

    使用Vue3实现一个Upload组件的示例代码

    通用上传组件开发 开发上传组件前我们需要了解: FormData上传文件所需API dragOver文件拖拽到区域时触发 dragLeave文件离开拖动区域 drop文件移动到有效目标时 首先实现一个最基本的上传流程: 基本上传流程,点击按钮选择,完成上传 代码如下: <template> <div class="app-container"> <!--使用change事件--> <input type="file" @ch

  • vue封装可复用组件confirm,并绑定在vue原型上的示例

    如下所示: 首先我们需要创建 confirm.vue , confirm.js这两个文件,一个实现dom结构,一个实现相关逻辑 confirm.vue <template> <div class="confirm" v-if="isShow"> <div class="con_box" > <div class="context"> <h6>{{text.type}}

随机推荐