t-fighting-design/lib/back-top/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("./index3.js"),s=require("../../_utils/index3.js"),b=["onClick"],m=e.defineComponent({name:"FBackTop"}),k=e.defineComponent({...m,props:f.Props,setup(u){const n=u,r=e.ref(!1),c=o=>s.debounce(()=>{const t=(o||document.documentElement).scrollTop;r.value=t>n.visibleHeight},200),d=()=>{const{top:o,behavior:t,listenEl:l}=n;if(l){document.querySelector(l).scrollTo({top:o,behavior:t});return}window.scrollTo({top:o,behavior:t})};e.onMounted(()=>{if(n.listenEl){const o=document.querySelector(n.listenEl);o.addEventListener("scroll",c(o))}document.addEventListener("scroll",c(null))});const a=e.computed(()=>{const{right:o,bottom:t,zIndex:l,background:i,color:p}=n;return{"--f-back-top-right":s.sizeChange(o),"--f-back-top-bottom":s.sizeChange(t),"--f-back-top-z-index":l,"--f-back-top-background":i,"--f-back-top-color":p}});return(o,t)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["f-back-top",{"f-back-top__round":o.round}]),style:e.normalizeStyle(e.unref(a)),onClick:e.withModifiers(d,["stop"])},[e.renderSlot(o.$slots,"default")],14,b)),[[e.vShow,r.value]])}});exports.default=k;