| 1 |
- import{e as s,o as a,G as t}from"./vendor.f7062dc0.js";const n={class:"markdown-body"},l=[t('<h1>BackTop 返回顶部</h1><h3>介绍</h3><p>提供较长的页面快捷返回顶部功能。</p><h3>安装</h3><pre><code class="language-javascript">\n<span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { BackTop } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui-taro'</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(BackTop);\n\n</code></pre><h3>代码实例</h3><h3>基本用法</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-backtop</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"100vh"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:content</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-data"</span>></span>我是测试数据1<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-data"</span>></span>我是测试数据2<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-data"</span>></span>我是测试数据3<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-data"</span>></span>我是测试数据4<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-data"</span>></span>我是测试数据5<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-data"</span>></span>我是测试数据6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n ...\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-backtop</span>></span>\n</code></pre><h3>设置出现位置</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-backtop</span> <span class="hljs-attr">:distance</span>=<span class="hljs-string">"200"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-backtop</span>></span>\n</code></pre><h3>自定义样式</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-backtop</span> <span class="hljs-attr">:distance</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">:bottom</span>=<span class="hljs-string">"90"</span>></span><span class="hljs-tag"><<span class="hljs-name">div</span>></span>自定义内容<span class="hljs-tag"></<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-backtop</span>></span>\n</code></pre><h3>click事件</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-backtop</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"handleClick"</span> ></span><span class="hljs-tag"></<span class="hljs-name">nut-backtop</span>></span>\n</code></pre><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> createDemo({\n <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params">props, { emit }</span>)</span> {\n <span class="hljs-keyword">const</span> handleClick = <span class="hljs-function">() =></span> {\n <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'触发返回顶部'</span>);\n };\n\n <span class="hljs-keyword">return</span> {\n handleClick\n };\n }\n});\n</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>\n</code></pre><h3>API</h3><h3>Prop</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>height</td><td>滚动区域的高度</td><td>String</td><td><code>100vh</code></td></tr><tr><td>bottom</td><td>距离页面底部距离</td><td>Number</td><td><code>20</code></td></tr><tr><td>right</td><td>距离页面右侧距离</td><td>Number</td><td><code>10</code></td></tr><tr><td>distance</td><td>页面垂直滚动多高后出现</td><td>Number</td><td><code>200</code></td></tr><tr><td>z-index</td><td>设置组件页面层级</td><td>Number</td><td><code>10</code></td></tr></tbody></table><h3>Event</h3><table><thead><tr><th>名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>click</td><td>按钮点击时触发事件</td><td>event: MouseEvent</td></tr></tbody></table>',20)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};
|
