import{e as s,o as a,G as t}from"./vendor.f7062dc0.js";const n={class:"markdown-body"},l=[t('

BackTop 返回顶部

介绍

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

安装

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

代码实例

基本用法

<nut-backtop height="100vh">\n  <template v-slot:content>\n    <div class="text-data">我是测试数据1</div>\n    <div class="text-data">我是测试数据2</div>\n    <div class="text-data">我是测试数据3</div>\n    <div class="text-data">我是测试数据4</div>\n    <div class="text-data">我是测试数据5</div>\n    <div class="text-data">我是测试数据6</div>\n    ...\n  </template>\n</nut-backtop>\n

设置出现位置

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

自定义样式

<nut-backtop :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

字段说明类型默认值
height滚动区域的高度String100vh
bottom距离页面底部距离Number20
right距离页面右侧距离Number10
distance页面垂直滚动多高后出现Number200
z-index设置组件页面层级Number10

Event

名称说明回调参数
click按钮点击时触发事件event: MouseEvent
',20)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};