【区分vue2和vue3下的element UI Backtop 回到顶部组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中,Backtop 组件用于快速回到页面顶部,但它们在细节上可能有所不同,尤其是在属性和事件的支持上。不过,基本的功能和用法是相似的。

Vue 2 + Element UI 的 el-backtop

在 Vue 2 中,Element UI 提供了 el-backtop 组件用于快速回到页面顶部。

属性(Props)
  • target: 指定滚动的目标元素,默认为 window
  • visibility-height: 滚动高度达到此参数值才出现 BackTop,默认为 200
  • custom-style: 自定义样式,可以是一个对象。
事件(Events)
  • click: 点击回到顶部按钮时触发。
方法(不直接暴露)

el-backtop 组件通常不直接暴露方法供外部调用。

示例
<template>
  <div style="height: 2000px;">
    <el-backtop target=".page-content" :visibility-height="100" @click="handleClick">
      <!-- 你可以在这里自定义按钮内容,但默认会使用 Element U
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

加仑小铁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值