Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 7x 7x 7x | <template> <div :class="$style.root"> <div :class="$style.body" :position="currentPosition" ref="body" vusion-slot-name="default"> <slot></slot> </div> </div> </template> <script> import event from '../../utils/event'; import { findScrollParent } from '../../utils/dom'; import throttle from 'lodash/throttle'; export default { name: 'u-footbar', props: { position: { type: String, default: 'static' }, scrollParent: HTMLElement, }, data() { return { currentPosition: this.position, currentScrollParent: this.scrollParent, }; }, watch: { position(position) { this.currentPosition = position; if (position === 'auto') { this.setAutoBar(); } else { event.off(this.currentScrollParent, 'scroll', this.cb); } }, }, destroyed() { event.off(this.currentScrollParent, 'scroll', this.cb); }, mounted() { this.currentScrollParent = this.scrollParent || findScrollParent(this.$el); }, methods: { setAutoBar() { const currentElem = this.$el; const bodyEl = this.$refs.body; const cntHeight = bodyEl.getBoundingClientRect(); this.checkPos1 = throttle(this.checkPos, 500); this.checkPos1(currentElem, cntHeight.height); this.cb = (e) => { this.checkPos1(currentElem, cntHeight.height); }; event.on(this.currentScrollParent, 'scroll', this.cb); }, checkPos(currentElem, cntHeight = 0) { const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; const elemOffset = currentElem.getBoundingClientRect(); if (elemOffset.top < viewPortHeight - cntHeight / 2) { this.currentPosition = 'auto'; } else { this.currentPosition = 'fixed'; } }, }, }; </script> <style module> .root { position: relative; } .body { padding: 20px 0; } .body[position="static"] { position: static; } .body[position="fixed"] { position: fixed; z-index: 100; bottom: 0; left: var(--sidebar-width); right: 0; background: var(--background-color-light); padding: 20px 40px; color: var(--color-base); border: 1px solid var(--border-color-base); box-shadow: 0 0 10px 0 rgba(80, 90, 109, 0.16); animation: slideInUp var(--transition-duration-slow) both; } @keyframes slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } </style> |