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

BackTop \u8FD4\u56DE\u9876\u90E8

\u4ECB\u7ECD

\u63D0\u4F9B\u8F83\u957F\u7684\u9875\u9762\u5FEB\u6377\u8FD4\u56DE\u9876\u90E8\u529F\u80FD\u3002

\u5B89\u88C5


import { createApp } from 'vue';
import { BackTop,Icon } from '@nutui/nutui';

const app = createApp();
app.use(BackTop);
app.use(Icon);

\u4EE3\u7801\u5B9E\u4F8B

\u57FA\u672C\u7528\u6CD5

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

\u8BBE\u7F6E\u51FA\u73B0\u4F4D\u7F6E

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

\u81EA\u5B9A\u4E49\u6837\u5F0F

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

click\u4E8B\u4EF6

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

<script>
export default createDemo({
  setup(props, { emit }) {
    const handleClick = () => {
      console.log('\u89E6\u53D1\u8FD4\u56DE\u9876\u90E8');
    };

    return {
      handleClick
    };
  }
});
</script>

API

Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
el-id	\u83B7\u53D6\u76D1\u542C\u5143\u7D20\u7684\u7236\u7EA7\u5143\u7D20	String	-
bottom	\u8DDD\u79BB\u9875\u9762\u5E95\u90E8\u8DDD\u79BB	Number	`20`
right	\u8DDD\u79BB\u9875\u9762\u53F3\u4FA7\u8DDD\u79BB	Number	`10`
distance	\u9875\u9762\u5782\u76F4\u6EDA\u52A8\u591A\u9AD8\u540E\u51FA\u73B0	Number	`200`
z-index	\u8BBE\u7F6E\u7EC4\u4EF6\u9875\u9762\u5C42\u7EA7	Number	`10`
is-animation	\u662F\u5426\u6709\u52A8\u753B,\u548Cduration\u53C2\u6570\u4E92\u65A5	Boolean	`true`
duration	\u8BBE\u7F6E\u52A8\u753B\u6301\u7EED\u65F6\u95F4	Number	`1000`

Event

\u540D\u79F0	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
click	\u6309\u94AE\u70B9\u51FB\u65F6\u89E6\u53D1\u4E8B\u4EF6	event: MouseEvent

`,20),c=[p],j={setup(e,{expose:s}){return s({frontmatter:{}}),(o,h)=>(t(),a("div",l,c))}};export{j as default};