/*! For license information please see 4234.52a3c430.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["4234"],{43864:function(s,n,a){"use strict";a.r(n);var t=a("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

BackTop \u56DE\u5230\u9876\u90E8

\n

\u4ECB\u7ECD

\n

\u8FD4\u56DE\u9875\u9762\u9876\u90E8\u7684\u64CD\u4F5C\u6309\u94AE\u3002

\n

\u5F15\u5165

\n

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

\n
import { createApp } from 'vue';\nimport { BackTop } from 'vant';\n\nconst app = createApp();\napp.use(BackTop);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

\u8BF7\u6EDA\u52A8\u53F3\u4FA7\u7684\u793A\u4F8B\u9875\u9762\uFF0C\u5F53\u9875\u9762\u6EDA\u52A8 200px \u65F6\uFF0C\u53F3\u4E0B\u89D2\u4F1A\u51FA\u73B0\u8FD4\u56DE\u9876\u90E8\u6309\u94AE\u3002

\n
<van-cell v-for="item in list" :key="item" :title="item" />\n\n<van-back-top />\n
\n
export default {\n  setup() {\n    const list = [...Array(50).keys()];\n    return { list };\n  },\n};\n
\n

\u81EA\u5B9A\u4E49\u4F4D\u7F6E

\n

\u901A\u8FC7 right \u548C bottom \u5C5E\u6027\u6765\u8BBE\u7F6E\u7EC4\u4EF6\u8DDD\u79BB\u53F3\u4FA7\u548C\u5E95\u90E8\u7684\u4F4D\u7F6E\u3002

\n
<van-cell v-for="item in list" :key="item" :title="item" />\n<van-back-top right="15vw" bottom="10vh" />\n
\n
export default {\n  setup() {\n    const list = [...Array(50).keys()];\n    return { list };\n  },\n};\n
\n

\u81EA\u5B9A\u4E49\u5185\u5BB9

\n

\u4F7F\u7528\u9ED8\u8BA4\u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5C55\u793A\u7684\u5185\u5BB9\u3002

\n
<van-cell v-for="item in list" :key="item" :title="item" />\n<van-back-top class="custom">\u8FD4\u56DE\u9876\u90E8</van-back-top>\n\n<style>\n  .custom {\n    width: 80px;\n    font-size: 14px;\n    text-align: center;\n  }\n</style>\n
\n
export default {\n  setup() {\n    const list = [...Array(50).keys()];\n    return { list };\n  },\n};\n
\n

\u8BBE\u7F6E\u6EDA\u52A8\u76EE\u6807

\n

\u53EF\u4EE5\u901A\u8FC7 target \u5C5E\u6027\u6765\u8BBE\u7F6E\u89E6\u53D1\u6EDA\u52A8\u7684\u76EE\u6807\u5BF9\u8C61\uFF0C\u652F\u6301\u4F20\u5165\u9009\u62E9\u5668\u6216 HTMLElement\u3002

\n
<div class="container">\n  <van-cell v-for="item in list" :key="item" :title="item" />\n  <van-back-top target=".container" bottom="30vh" />\n</div>\n\n<style>\n  .container {\n    height: 60vh;\n    overflow: auto;\n  }\n</style>\n
\n
export default {\n  setup() {\n    const list = [...Array(50).keys()];\n    return { list };\n  },\n};\n
\n

\u77AC\u95F4\u6EDA\u52A8

\n

\u5F53\u8BBE\u7F6E immediate \u5C5E\u6027\u540E\uFF0C\u9875\u9762\u6EDA\u52A8\u7684\u8FC7\u7A0B\u4E0D\u518D\u6709\u8FC7\u6E21\u6548\u679C\uFF0C\u800C\u662F\u77AC\u95F4\u6EDA\u52A8\u5230\u9876\u90E8\u3002

\n
<van-back-top immediate />\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
target\u89E6\u53D1\u6EDA\u52A8\u7684\u76EE\u6807\u5BF9\u8C61\uFF0C\u652F\u6301\u4F20\u5165\u9009\u62E9\u5668\u6216 DOM \u5143\u7D20\uFF0C\u9ED8\u8BA4\u6700\u8FD1\u7684\u7236\u7EA7\u6EDA\u52A8\u5BB9\u5668string | HTMLElement-
right\u8DDD\u79BB\u9875\u9762\u53F3\u4FA7\u7684\u8DDD\u79BB\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber | string30
bottom\u8DDD\u79BB\u9875\u9762\u5E95\u90E8\u7684\u8DDD\u79BB\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber | string40
offset\u6EDA\u52A8\u9AD8\u5EA6\u8FBE\u5230\u6B64\u53C2\u6570\u503C\u65F6\u624D\u663E\u793A\u7EC4\u4EF6number200
teleport\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027string | Elementbody
immediate v4.0.9\u662F\u5426\u77AC\u95F4\u6EDA\u52A8\u5230\u9876\u90E8booleanfalse
z-index\u8BBE\u7F6E\u7EC4\u4EF6\u7684 z-index \u5C42\u7EA7number | string100
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
click\u70B9\u51FB\u7EC4\u4EF6\u65F6\u89E6\u53D1event: MouseEvent
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u8BF4\u660E
default\u81EA\u5B9A\u4E49\u6309\u94AE\u663E\u793A\u5185\u5BB9
\n

\u7C7B\u578B\u5B9A\u4E49

\n

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

\n
import type { BackTopProps, BackTopThemeVars } from 'vant';\n
\n

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-back-top-size40px-
--van-back-top-icon-size20px-
--van-back-top-right30px-
--van-back-top-bottom40px-
--van-back-top-z-index100-
--van-back-top-text-color#fff-
--van-back-top-backgroundvar(--van-blue)-
\n
'},null,8,l))}}}]);