BackTop 返回顶部

介绍

提供较长的页面快捷返回顶部功能。

安装

  1. import { createApp } from 'vue';
  2. import { BackTop } from '@nutui/nutui';
  3. const app = createApp();
  4. app.use(BackTop);

代码实例

基本用法

  1. <nut-backtop el-id="elId" ></nut-backtop>

设置出现位置

  1. <nut-backtop :distance="200" ></nut-backtop>

自定义样式

  1. <nut-backtop @click="handleClick" el-id="elId" :distance="100" :bottom="90" ><div></div></nut-backtop>

click事件

  1. <nut-backtop @click="handleClick" ></nut-backtop>
  1. <script>
  2. export default createDemo({
  3. setup(props, { emit }) {
  4. const handleClick = () => {
  5. console.log('触发返回顶部');
  6. };
  7. return {
  8. handleClick
  9. };
  10. }
  11. });
  12. </script>

API

Prop

字段说明类型默认值
el-id获取监听元素的父级元素String-
bottom距离页面底部距离Number20
right距离页面右侧距离Number10
distance页面垂直滚动多高后出现Number200
z-index设置组件页面层级Number10
is-animation是否有动画,和duration参数互斥Booleantrue
duration设置动画持续时间Number1000

Event

名称说明回调参数
click按钮点击时触发事件event: MouseEvent

BackTop  返回顶部 - 图1