import{c as t,o as d,B as e}from"./vendor.36ea9f7d.js";const o={class:"markdown-body"},c=e('

BackTop 返回顶部

介绍

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

安装

\nimport { createApp } from 'vue';\nimport { BackTop } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(BackTop);\n\n

代码实例

基本用法

<nut-backtop  el-id="elId" ></nut-backtop>\n

设置出现位置

<nut-backtop :distance="200" ></nut-backtop>\n

自定义样式

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

click事件

<nut-backtop @click="handleClick" ></nut-backtop>\n

<script>\nexport default createDemo({\n  setup(props, { emit }) {\n    const handleClick = () => {\n      console.log('触发返回顶部');\n    };\n\n    return {\n      handleClick\n    };\n  }\n});\n</script>\n

API

Prop

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

Event

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

',20),a={expose:[],setup:e=>(e,a)=>(d(),t("div",o,[c]))};export default a;