| | |
| | | <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')
|
| | | }
|
| | | }
|
| | | },
|
| | | mounted() {
|
| | | this.insertToBody()
|
| | | this.addEventClick()
|
| | | },
|
| | | beforeDestroy() {
|
| | |
| | | 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)
|
| | | }
|
| | | },
|
| | | insertToBody() {
|
| | | const elx = this.$refs.rightPanel
|
| | | const body = document.querySelector('body')
|
| | | body.insertBefore(elx, body.firstChild)
|
| | | }
|
| | | }
|
| | | }
|
| | | </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 {
|