Urara-Blog/build/_app/immutable/pages/2022-06-10-backtotop.md-ad0b03e7 2.js

import{S as Rs,i as sl,s as ll,C as Ts,w as al,x as ol,y as nl,z as pl,A as Zs,f as el,t as tl,B as Fl,X as Ns,l as o,r,a as v,V as Qs,m as n,n as p,u as c,h as a,c as E,W as Xs,p as t,b as u,G as l,E as rl}from"../chunks/index-cd58b8d1.js";import{P as cl}from"../chunks/post_layout-9085e57e.js";import"../chunks/posts-c52cb603.js";import"../chunks/title-765c989f.js";import"../chunks/index-81c83cec.js";import"../chunks/post_card-e7f4525a.js";import"../chunks/posts-57ab4794.js";import"../chunks/icon-3aa13b39.js";import"../chunks/head-4a058b17.js";import"../chunks/footer-1abd9501.js";function yl(x){let e,f,i,B,F,D,V,h,ls,Y,m,P,as,os,C,ns,M,ps,es,H,ts,Fs,rs,k,cs,U,ys,Ds,J,W,Js=`<pre class="shiki material-default with-title" style="background-color: #263238; color: #EEFFFF" vue="true" title="BackToTop.vue"><div class='code-title'>BackToTop.vue</div><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">template</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">position-sticky bottom-0 end-0 w-100 d-flex justify-content-end b-0 pb-3 pe-5</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">transition</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">btn btn-secondary btn-sm</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-show</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">isVisible</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">scrollToTop</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">aria-label</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">scroll to top of the page</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">img</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">src</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">../assets/to-top.min.svg</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">alt</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">an arrow point to top</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">button</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">transition</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">template</span><span style="color: #89DDFF">&gt;</span></div><div class='line'></div><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">defineComponent</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">onMounted</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">onBeforeUnmount</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">default</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">defineComponent</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178">name</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">BackToTop</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178">setup</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">isVisible</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">ref</span><span style="color: #F07178">(</span><span style="color: #FF9CAC">false</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">handleScroll</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #F07178">      </span><span style="color: #EEFFFF">isVisible</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">window</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">scrollY</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&gt;</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #89DDFF">&#125;</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">scrollToTop</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #F07178">      </span><span style="color: #EEFFFF">window</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">scrollTo</span><span style="color: #F07178">(</span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #F07178">        top</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #F07178">        behavior</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">smooth</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #F07178">      </span><span style="color: #89DDFF">&#125;</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #89DDFF">&#125;</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #82AAFF">onMounted</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #F07178">      </span><span style="color: #EEFFFF">window</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">addEventListener</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">scroll</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">handleScroll</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #89DDFF">&#125;</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #82AAFF">onBeforeUnmount</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #F07178">      </span><span style="color: #EEFFFF">window</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">removeEventListener</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">scroll</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">handleScroll</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #89DDFF">&#125;</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #F07178">      </span><span style="color: #EEFFFF">isVisible</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #F07178">      </span><span style="color: #EEFFFF">handleScroll</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #F07178">      </span><span style="color: #EEFFFF">scrollToTop</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #89DDFF">&#125;</span></div><div class='line'><span style="color: #F07178">  </span><span style="color: #89DDFF">&#125;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">script</span><span style="color: #89DDFF">&gt;</span></div><div class='line'></div><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">style</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">v-enter-active</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">v-leave-active</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">transition</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> opacity </span><span style="color: #F78C6C">0.2s</span><span style="color: #EEFFFF"> ease</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">v-enter-from</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">v-leave-to</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">opacity</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">style</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,G,O,Ks=`<pre class="shiki material-default with-title" style="background-color: #263238; color: #EEFFFF" html="true" title="to-top.min.svg"><div class='code-title'>to-top.min.svg</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">svg</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">width</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">20</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">height</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">20</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">viewBox</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">0 0 48 48</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">fill</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">none</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">xmlns</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">http://www.w3.org/2000/svg</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">path</span></div><div class='line'><span style="color: #89DDFF">    </span><span style="color: #C792EA">d</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">M24.008 14.1V42M12 26l12-12 12 12M12 6h24</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF">    </span><span style="color: #C792EA">stroke</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">#fff</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF">    </span><span style="color: #C792EA">stroke-width</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">4</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF">    </span><span style="color: #C792EA">stroke-linecap</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">round</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF">    </span><span style="color: #C792EA">stroke-linejoin</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">round</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">svg</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,q,L,is,K,d,z,A,ds,vs,Z,g,Es,us,N,b,fs,ms,Q,w,_s,Cs,X,T,hs,R,S,As,j,gs;return{c(){e=o("p"),f=r("\u4E3B\u8981\u53C2\u8003\uFF1A"),i=o("a"),B=r("Simple Vue.js and Tailwind.css Scroll To Top Button | Adam Bailey"),F=v(),D=o("p"),V=r("CSS \u5E93\uFF1A"),h=o("a"),ls=r("Bootstrap V5.2"),Y=v(),m=o("ul"),P=o("li"),as=r("\u6309\u94AE\u7684\u5E03\u5C40\u65B9\u5F0F\u4E3A sticky"),os=v(),C=o("li"),ns=r("\u56E0\u4E3A\u53EF\u80FD\u9700\u8981\u9891\u7E41\u5207\u6362\u663E\u793A\u72B6\u6001\uFF0C\u6240\u4EE5\u7528"),M=o("code"),ps=r("v-show"),es=r(" \u800C\u4E0D\u662F "),H=o("code"),ts=r("v-if"),Fs=r("\u6765\u63A7\u5236\u6309\u94AE\u53EF\u89C1\u6027"),rs=v(),k=o("li"),cs=r("\u4F7F\u7528 Vue \u4E2D\u5185\u7F6E\u7684"),U=o("code"),ys=r("<transition>"),Ds=r("\u7EC4\u4EF6\u5B9E\u73B0\u72B6\u6001\u4E4B\u95F4\u7684\u5E73\u6ED1\u8FC7\u6E21"),J=v(),W=new Qs(!1),G=v(),O=new Qs(!1),q=v(),L=o("p"),is=r("\u5176\u4ED6\u53C2\u8003/\u5B9E\u73B0\u65B9\u5F0F\uFF1A"),K=v(),d=o("ul"),z=o("li"),A=o("a"),ds=r("vue \u8FD4\u56DE\u9876\u90E8\u7684\u7EC4\u4EF6 BackTop"),vs=v(),Z=o("li"),g=o("a"),Es=r("vue-simple-scroll-up/ScrollToTop.vue \xB7 GitHub"),us=v(),N=o("li"),b=o("a"),fs=r("Vue.js - Scroll Back To Top Button Without Library"),ms=v(),Q=o("li"),w=o("a"),_s=r("Vue3 \u4ECE 0 \u5230 1 \u7EC4\u4EF6\u5F00\u53D1-\u57FA\u7840\u7EC4\u4EF6\uFF1ABackTop \u56DE\u9876 - \u6398\u91D1"),Cs=v(),X=o("li"),T=o("a"),hs=r("vue \u76F8\u540C\u8DEF\u5F84\u5237\u65B0\u600E\u4E48\u56DE\u5230\u9876\u90E8 - \u6398\u91D1"),R=v(),S=o("p"),As=r("\u9898\u5916\u8BDD\uFF1A"),j=o("span"),gs=r("BootStrap \u7684\u6587\u6863\u5199\u5F97\u597D\u70C2"),this.h()},l(s){e=n(s,"P",{});var y=p(e);f=c(y,"\u4E3B\u8981\u53C2\u8003\uFF1A"),i=n(y,"A",{href:!0,rel:!0,target:!0});var Bs=p(i);B=c(Bs,"Simple Vue.js and Tailwind.css Scroll To Top Button | Adam Bailey"),Bs.forEach(a),y.forEach(a),F=E(s),D=n(s,"P",{});var bs=p(D);V=c(bs,"CSS \u5E93\uFF1A"),h=n(bs,"A",{href:!0,rel:!0,target:!0});var ks=p(h);ls=c(ks,"Bootstrap V5.2"),ks.forEach(a),bs.forEach(a),Y=E(s),m=n(s,"UL",{});var $=p(m);P=n($,"LI",{});var Ss=p(P);as=c(Ss,"\u6309\u94AE\u7684\u5E03\u5C40\u65B9\u5F0F\u4E3A sticky"),Ss.forEach(a),os=E($),C=n($,"LI",{});var I=p(C);ns=c(I,"\u56E0\u4E3A\u53EF\u80FD\u9700\u8981\u9891\u7E41\u5207\u6362\u663E\u793A\u72B6\u6001\uFF0C\u6240\u4EE5\u7528"),M=n(I,"CODE",{});var xs=p(M);ps=c(xs,"v-show"),xs.forEach(a),es=c(I," \u800C\u4E0D\u662F "),H=n(I,"CODE",{});var Vs=p(H);ts=c(Vs,"v-if"),Vs.forEach(a),Fs=c(I,"\u6765\u63A7\u5236\u6309\u94AE\u53EF\u89C1\u6027"),I.forEach(a),rs=E($),k=n($,"LI",{});var ss=p(k);cs=c(ss,"\u4F7F\u7528 Vue \u4E2D\u5185\u7F6E\u7684"),U=n(ss,"CODE",{});var Ls=p(U);ys=c(Ls,"<transition>"),Ls.forEach(a),Ds=c(ss,"\u7EC4\u4EF6\u5B9E\u73B0\u72B6\u6001\u4E4B\u95F4\u7684\u5E73\u6ED1\u8FC7\u6E21"),ss.forEach(a),$.forEach(a),J=E(s),W=Xs(s,!1),G=E(s),O=Xs(s,!1),q=E(s),L=n(s,"P",{});var js=p(L);is=c(js,"\u5176\u4ED6\u53C2\u8003/\u5B9E\u73B0\u65B9\u5F0F\uFF1A"),js.forEach(a),K=E(s),d=n(s,"UL",{});var _=p(d);z=n(_,"LI",{});var $s=p(z);A=n($s,"A",{href:!0,rel:!0,target:!0});var Is=p(A);ds=c(Is,"vue \u8FD4\u56DE\u9876\u90E8\u7684\u7EC4\u4EF6 BackTop"),Is.forEach(a),$s.forEach(a),vs=E(_),Z=n(_,"LI",{});var Ps=p(Z);g=n(Ps,"A",{href:!0,rel:!0,target:!0});var Ms=p(g);Es=c(Ms,"vue-simple-scroll-up/ScrollToTop.vue \xB7 GitHub"),Ms.forEach(a),Ps.forEach(a),us=E(_),N=n(_,"LI",{});var Hs=p(N);b=n(Hs,"A",{href:!0,rel:!0,target:!0});var Us=p(b);fs=c(Us,"Vue.js - Scroll Back To Top Button Without Library"),Us.forEach(a),Hs.forEach(a),ms=E(_),Q=n(_,"LI",{});var Ws=p(Q);w=n(Ws,"A",{href:!0,rel:!0,target:!0});var Gs=p(w);_s=c(Gs,"Vue3 \u4ECE 0 \u5230 1 \u7EC4\u4EF6\u5F00\u53D1-\u57FA\u7840\u7EC4\u4EF6\uFF1ABackTop \u56DE\u9876 - \u6398\u91D1"),Gs.forEach(a),Ws.forEach(a),Cs=E(_),X=n(_,"LI",{});var Os=p(X);T=n(Os,"A",{href:!0,rel:!0,target:!0});var qs=p(T);hs=c(qs,"vue \u76F8\u540C\u8DEF\u5F84\u5237\u65B0\u600E\u4E48\u56DE\u5230\u9876\u90E8 - \u6398\u91D1"),qs.forEach(a),Os.forEach(a),_.forEach(a),R=E(s),S=n(s,"P",{});var ws=p(S);As=c(ws,"\u9898\u5916\u8BDD\uFF1A"),j=n(ws,"SPAN",{class:!0});var zs=p(j);gs=c(zs,"BootStrap \u7684\u6587\u6863\u5199\u5F97\u597D\u70C2"),zs.forEach(a),ws.forEach(a),this.h()},h(){t(i,"href","https://adambailey.io/blog/scroll-to-top-button-vue/"),t(i,"rel","nofollow noopener noreferrer external"),t(i,"target","_blank"),t(h,"href","https://getbootstrap.com/docs/5.2/getting-started/introduction/"),t(h,"rel","nofollow noopener noreferrer external"),t(h,"target","_blank"),W.a=G,O.a=q,t(A,"href","https://blog.csdn.net/m0_46217225/article/details/117933815"),t(A,"rel","nofollow noopener noreferrer external"),t(A,"target","_blank"),t(g,"href","https://github.com/asdf1899/vue-simple-scroll-up/blob/master/src/ScrollToTop.vue"),t(g,"rel","nofollow noopener noreferrer external"),t(g,"target","_blank"),t(b,"href","https://codepen.io/webty_mizusawa/pen/QWLMeqE"),t(b,"rel","nofollow noopener noreferrer external"),t(b,"target","_blank"),t(w,"href","https://juejin.cn/post/6993729338843594783"),t(w,"rel","nofollow noopener noreferrer external"),t(w,"target","_blank"),t(T,"href","https://juejin.cn/post/6873264845915947016"),t(T,"rel","nofollow noopener noreferrer external"),t(T,"target","_blank"),t(j,"class","spoiler")},m(s,y){u(s,e,y),l(e,f),l(e,i),l(i,B),u(s,F,y),u(s,D,y),l(D,V),l(D,h),l(h,ls),u(s,Y,y),u(s,m,y),l(m,P),l(P,as),l(m,os),l(m,C),l(C,ns),l(C,M),l(M,ps),l(C,es),l(C,H),l(H,ts),l(C,Fs),l(m,rs),l(m,k),l(k,cs),l(k,U),l(U,ys),l(k,Ds),u(s,J,y),W.m(Js,s,y),u(s,G,y),O.m(Ks,s,y),u(s,q,y),u(s,L,y),l(L,is),u(s,K,y),u(s,d,y),l(d,z),l(z,A),l(A,ds),l(d,vs),l(d,Z),l(Z,g),l(g,Es),l(d,us),l(d,N),l(N,b),l(b,fs),l(d,ms),l(d,Q),l(Q,w),l(w,_s),l(d,Cs),l(d,X),l(X,T),l(T,hs),u(s,R,y),u(s,S,y),l(S,As),l(S,j),l(j,gs)},p:rl,d(s){s&&a(e),s&&a(F),s&&a(D),s&&a(Y),s&&a(m),s&&a(J),s&&W.d(),s&&a(G),s&&O.d(),s&&a(q),s&&a(L),s&&a(K),s&&a(d),s&&a(R),s&&a(S)}}}function Dl(x){let e,f;const i=[x[0],Ys];let B={$$slots:{default:[yl]},$$scope:{ctx:x}};for(let F=0;F<i.length;F+=1)B=Ts(B,i[F]);return e=new cl({props:B}),{c(){al(e.$$.fragment)},l(F){ol(e.$$.fragment,F)},m(F,D){nl(e,F,D),f=!0},p(F,[D]){const V=D&1?pl(i,[D&1&&Zs(F[0]),D&0&&Zs(Ys)]):{};D&2&&(V.$$scope={dirty:D,ctx:F}),e.$set(V)},i(F){f||(el(e.$$.fragment,F),f=!0)},o(F){tl(e.$$.fragment,F),f=!1},d(F){Fl(e,F)}}}const Ys={title:"\u5B9E\u73B0\u4E00\u4E2A\u8FD4\u56DE\u9875\u9762\u9876\u90E8\u7684 Vue3 \u7EC4\u4EF6",created:"2022-06-10T00:00:00.000Z",summary:"\u7ED3\u5408\u6D41\u7545\u7684\u52A8\u753B\u5E73\u6ED1\u6EDA\u52A8\u5230\u9875\u9762\u9876\u90E8",tags:["Vue3","BootStrap"],slug:"/2022-06-10-backtotop.md",path:"/2022-06-10-backtotop",toc:[],updated:"2022-08-01T11:38:16.754Z"};function il(x,e,f){return x.$$set=i=>{f(0,e=Ts(Ts({},e),Ns(i)))},e=Ns(e),[e]}class gl extends Rs{constructor(e){super(),sl(this,e,il,Dl,ll,{})}}export{gl as default,Ys as metadata};