| | |
| | | <template> |
| | | <div ref="rightPanel" :class="{show:show}" class="rightPanel-container"> |
| | | <div ref="rightPanel" class="rightPanel-container"> |
| | | <div class="rightPanel-background" /> |
| | | <div class="rightPanel"> |
| | | <div class="rightPanel-items"> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { addClass, removeClass } from '@/utils' |
| | | |
| | | export default { |
| | | name: 'RightPanel', |
| | | props: { |
| | | clickNotClose: { |
| | | default: false, |
| | | type: Boolean |
| | | }, |
| | | buttonTop: { |
| | | default: 250, |
| | | type: Number |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | value: val |
| | | }) |
| | | } |
| | | }, |
| | | theme() { |
| | | return this.$store.state.settings.theme |
| | | }, |
| | | } |
| | | }, |
| | | watch: { |
| | | show(value) { |
| | | if (value && !this.clickNotClose) { |
| | | this.addEventClick() |
| | | } |
| | | if (value) { |
| | | addClass(document.body, 'showRightPanel') |
| | | } else { |
| | | removeClass(document.body, 'showRightPanel') |
| | | } |
| | | } |
| | | }, |
| | |
| | | window.addEventListener('click', this.closeSidebar) |
| | | }, |
| | | closeSidebar(evt) { |
| | | const parent = evt.target.closest('.rightPanel') |
| | | const parent = evt.target.closest('.el-drawer__body') |
| | | if (!parent) { |
| | | this.show = false |
| | | window.removeEventListener('click', this.closeSidebar) |
| | |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | .showRightPanel { |
| | | overflow: hidden; |
| | | position: relative; |
| | | width: calc(100% - 15px); |
| | | } |
| | | </style> |
| | | |
| | | <style lang="scss" scoped> |
| | | .rightPanel-background { |
| | |
| | | transform: translate(100%); |
| | | background: #fff; |
| | | z-index: 40000; |
| | | } |
| | | |
| | | .show { |
| | | transition: all .3s cubic-bezier(.7, .3, .1, 1); |
| | | |
| | | .rightPanel-background { |
| | | z-index: 20000; |
| | | opacity: 1; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | .rightPanel { |
| | | transform: translate(0); |
| | | } |
| | | } |
| | | |
| | | .handle-button { |