Tweak UI
This commit is contained in:
@@ -7,6 +7,7 @@ import tooltip from './tooltip';
|
||||
import hotkey from './hotkey';
|
||||
import appear from './appear';
|
||||
import anim from './anim';
|
||||
import stickyContainer from './sticky-container';
|
||||
|
||||
export default function(app: App) {
|
||||
app.directive('userPreview', userPreview);
|
||||
@@ -17,4 +18,5 @@ export default function(app: App) {
|
||||
app.directive('hotkey', hotkey);
|
||||
app.directive('appear', appear);
|
||||
app.directive('anim', anim);
|
||||
app.directive('sticky-container', stickyContainer);
|
||||
}
|
||||
|
15
src/client/directives/sticky-container.ts
Normal file
15
src/client/directives/sticky-container.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { Directive } from 'vue';
|
||||
|
||||
export default {
|
||||
mounted(src, binding, vn) {
|
||||
//const query = binding.value;
|
||||
|
||||
const header = src.children[0];
|
||||
const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop');
|
||||
src.style.setProperty('--stickyTop', `${parseInt(currentStickyTop) + header.offsetHeight}px`);
|
||||
header.style.setProperty('--stickyTop', currentStickyTop);
|
||||
header.style.position = 'sticky';
|
||||
header.style.top = 'var(--stickyTop)';
|
||||
header.style.zIndex = '1';
|
||||
},
|
||||
} as Directive;
|
Reference in New Issue
Block a user