vxe-pc-ui/lib/backtop/src/backtop.min.js

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_log=require("../../ui/src/log"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_button=_interopRequireDefault(require("../../button"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createInternalData(){return{targetEl:null}}function createReactData(){return{showBtn:!1,backtopZindex:0}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeBacktop",props:{target:String,size:{type:String,default:()=>(0,_ui.getConfig)().backtop.size||(0,_ui.getConfig)().size},circle:{type:Boolean,default:()=>(0,_ui.getConfig)().backtop.circle},right:{type:[String,Number],default:()=>(0,_ui.getConfig)().backtop.right},bottom:{type:[String,Number],default:()=>(0,_ui.getConfig)().backtop.bottom},status:{type:[String,Number],default:()=>(0,_ui.getConfig)().backtop.status},icon:{type:String,default:()=>(0,_ui.getConfig)().backtop.icon},showIcon:{type:Boolean,default:()=>(0,_ui.getConfig)().backtop.showIcon},content:{type:[String,Number],default:()=>(0,_ui.getConfig)().backtop.content},showContent:{type:Boolean,default:()=>(0,_ui.getConfig)().backtop.showContent},showTop:{type:Boolean,default:()=>(0,_ui.getConfig)().backtop.showTop},showBottom:{type:Boolean,default:()=>(0,_ui.getConfig)().backtop.showBottom},shadow:{type:Boolean,default:()=>(0,_ui.getConfig)().backtop.shadow},zIndex:{type:[String,Number],default:()=>(0,_ui.getConfig)().backtop.zIndex},threshold:{type:[String,Number],default:()=>(0,_ui.getConfig)().backtop.threshold},position:{type:String,default:()=>(0,_ui.getConfig)().backtop.position}},emits:["click"],setup(v,e){let{slots:b,emit:r}=e;var t=_xeUtils.default.uniqueId();let m=(0,_vue.ref)(),h=(0,_ui.useSize)(v).computeSize,o=createInternalData(),x=(0,_vue.reactive)(createReactData()),a={refElem:m},k=(0,_vue.computed)(()=>{var{right:e,bottom:t}=v,o=x.backtopZindex,r={};return e&&(r.right=(0,_dom.toCssUnit)(e)),t&&(r.bottom=(0,_dom.toCssUnit)(t)),o&&(r.zIndex=o),r}),i={},w={xID:t,props:v,context:e,internalData:o,reactData:x,getRefMaps:()=>a,getComputeMaps:()=>i},n=(e,t,o)=>{r(e,(0,_ui.createEvent)(o,{$backtop:w},t))},u=()=>{var{position:e,zIndex:t}=v,o=x.backtopZindex;t?x.backtopZindex=_xeUtils.default.toNumber(t):"fixed"===e&&o<(0,_utils.getLastZIndex)()&&(x.backtopZindex=(0,_utils.nextZIndex)())},s=()=>{u(),x.showBtn=!0},l=()=>{x.showBtn=!1},c=e=>{var t=v.threshold;(e.currentTarget.scrollTop>Math.max(1,_xeUtils.default.toNumber(t))?s:l)()},p=()=>{var e,t=o.targetEl;t&&0<(e=t.scrollTop)&&(requestAnimationFrame(p),e=e-Math.max(12,e/6),t.scrollTop=10<e?e:0)},d=()=>{var e=o.targetEl;e&&e.removeEventListener("scroll",c)},g=()=>{(0,_vue.nextTick)(()=>{var e,t=v.target;t?_xeUtils.default.isString(t)&&(t=((e=document.querySelector(t))||(0,_log.errLog)("vxe.error.errProp",["target="+t,"body"]),o).targetEl,t!==e)&&(d(),o.targetEl=e,t=o.targetEl)&&t.addEventListener("scroll",c,{passive:!0}):(d(),(0,_log.errLog)("vxe.error.reqProp",["target"]))})},C=e=>{p(),n("click",{},e)};t={dispatchEvent:n};Object.assign(w,t,{});return(0,_vue.watch)(()=>v.position,()=>{u()}),(0,_vue.watch)(()=>v.target,()=>{g()}),(0,_vue.onMounted)(()=>{var e=v.showTop;e&&u(),g()}),(0,_vue.onBeforeUnmount)(()=>{d(),_xeUtils.default.assign(x,createReactData()),_xeUtils.default.assign(o,createInternalData())}),w.renderVN=()=>{var{circle:e,position:t,status:o,icon:r,showIcon:a,content:i,showContent:n,showTop:u,showBottom:s,shadow:l}=v,c=x.showBtn,p=k.value,d=h.value,g=b.default,_=b.top,f=b.bottom;return(0,_vue.h)("div",{ref:m,class:["vxe-backtop","fixed"===t?"is--"+t:"is--absolute",{["size--"+d]:d,"is--visible":c}],style:p},[u&&_?(0,_vue.h)("div",{class:"vxe-backtop--top-wrapper"},_({})):(0,_ui.renderEmptyElement)(w),(0,_vue.h)("div",{class:"vxe-backtop--content-wrapper",onClick:C},[g?g({}):[(0,_vue.h)(_button.default,{circle:e,status:o,shadow:l,icon:a?r||(0,_ui.getIcon)().BACKTOP_TOP:"",content:n?i:""})]]),s&&f?(0,_vue.h)("div",{class:"vxe-backtop--bottom-wrapper"},f({})):(0,_ui.renderEmptyElement)(w)])},w},render(){return this.renderVN()}});