diff --git a/components/Author.vue b/components/Author.vue index 0de8624b2..c4f289bc9 100644 --- a/components/Author.vue +++ b/components/Author.vue @@ -1,138 +1,138 @@ + + @@ -202,4 +177,15 @@ export default { margin-top: -45px; border: #fff 5px solid; } +.author { + white-space: nowrap; + position: relative; + display: flex; + align-items: center; + + &:hover, + &.active { + z-index: 999; + } +} diff --git a/components/Dropdown.vue b/components/Dropdown.vue index c5eca14eb..1cfe84c2b 100644 --- a/components/Dropdown.vue +++ b/components/Dropdown.vue @@ -3,10 +3,16 @@ :open.sync="isPopoverOpen" :open-group="Math.random().toString()" :placement="placement" + :disabled="disabled" trigger="manual" :offset="offset" > - +
@@ -29,6 +38,7 @@ let mouseLeaveTimer = null export default { props: { placement: { type: String, default: 'bottom-end' }, + disabled: { type: Boolean, default: false }, offset: { type: [String, Number], default: '16' } }, data() { @@ -36,17 +46,24 @@ export default { isPopoverOpen: false } }, + computed: { + isOpen() { + return this.isPopoverOpen + } + }, watch: { isPopoverOpen: { immediate: true, handler(isOpen) { try { if (isOpen) { - setTimeout(() => { - document - .getElementsByTagName('body')[0] - .classList.add('dropdown-open') - }, 10) + this.$nextTick(() => { + setTimeout(() => { + document + .getElementsByTagName('body')[0] + .classList.add('dropdown-open') + }, 20) + }) } else { document .getElementsByTagName('body')[0] @@ -62,11 +79,35 @@ export default { }, methods: { toggleMenu() { - this.isPopoverOpen = !this.isPopoverOpen + this.isPopoverOpen ? this.closeMenu(false) : this.openMenu(false) + }, + openMenu(useTimeout) { + if (this.disabled) { + return + } + this.clearTimeouts() + if (useTimeout === true) { + this.popoverMouseEnter() + } else { + this.isPopoverOpen = true + } + }, + closeMenu(useTimeout) { + if (this.disabled) { + return + } + this.clearTimeouts() + if (useTimeout === true) { + this.popoveMouseLeave() + } else { + this.isPopoverOpen = false + } }, popoverMouseEnter() { - clearTimeout(mouseEnterTimer) - clearTimeout(mouseLeaveTimer) + if (this.disabled) { + return + } + this.clearTimeouts() if (!this.isPopoverOpen) { mouseEnterTimer = setTimeout(() => { this.isPopoverOpen = true @@ -74,13 +115,19 @@ export default { } }, popoveMouseLeave() { - clearTimeout(mouseEnterTimer) - clearTimeout(mouseLeaveTimer) + if (this.disabled) { + return + } + this.clearTimeouts() if (this.isPopoverOpen) { mouseLeaveTimer = setTimeout(() => { this.isPopoverOpen = false }, 300) } + }, + clearTimeouts() { + clearTimeout(mouseEnterTimer) + clearTimeout(mouseLeaveTimer) } } } diff --git a/layouts/default.vue b/layouts/default.vue index aee92529d..d4db2a115 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -26,7 +26,7 @@