primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 3.33 kB
JavaScript
import{ZIndexUtils as e,DomHandler as t}from"primevue/utils";import{openBlock as n,createBlock as i,Transition as r,withCtx as l,createElementBlock as o,normalizeClass as s,createElementVNode as c,createCommentVNode as a}from"vue";var p={name:"ScrollTop",scrollListener:null,container:null,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:"pi pi-chevron-up"},behavior:{type:String,default:"smooth"}},data:()=>({visible:!1}),mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(e.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(t.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(t){e.set("overlay",t,this.$primevue.config.zIndex.overlay)},onAfterLeave(t){e.clear(t)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},iconClass(){return["p-scrolltop-icon",this.icon]},scrollTopAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.scrollTop:void 0}}};const h=["aria-label"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n position: fixed;\n bottom: 20px;\n right: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-scrolltop-sticky {\n position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n margin-left: auto;\n}\n.p-scrolltop-enter-from {\n opacity: 0;\n}\n.p-scrolltop-enter-active {\n transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n opacity: 0;\n}\n.p-scrolltop-leave-active {\n transition: opacity 0.15s;\n}\n"),p.render=function(e,t,p,d,u,m){return n(),i(r,{name:"p-scrolltop",appear:"",onEnter:m.onEnter,onAfterLeave:m.onAfterLeave},{default:l((()=>[u.visible?(n(),o("button",{key:0,ref:m.containerRef,class:s(m.containerClass),onClick:t[0]||(t[0]=(...e)=>m.onClick&&m.onClick(...e)),type:"button","aria-label":m.scrollTopAriaLabel},[c("span",{class:s(m.iconClass)},null,2)],10,h)):a("",!0)])),_:1},8,["onEnter","onAfterLeave"])};export{p as default};