春风项目四线(合箱线、总装线)
wujian
2024-01-24 78830ddf56a41d16ab440a1ed3019ef77b3db4af
提交 | 用户 | 时间
fd2207 1 <template>
2   <div ref="rightPanel" class="rightPanel-container">
3     <div class="rightPanel-background" />
4     <div class="rightPanel">
5       <div class="rightPanel-items">
6         <slot />
7       </div>
8     </div>
9   </div>
10 </template>
11
12 <script>
13 export default {
14   name: 'RightPanel',
15   props: {
16     clickNotClose: {
17       default: false,
18       type: Boolean
19     }
20   },
21   computed: {
22     show: {
23       get() {
24         return this.$store.state.settings.showSettings
25       },
26       set(val) {
27         this.$store.dispatch('settings/changeSetting', {
28           key: 'showSettings',
29           value: val
30         })
31       }
32     }
33   },
34   watch: {
35     show(value) {
36       if (value && !this.clickNotClose) {
37         this.addEventClick()
38       }
39     }
40   },
41   mounted() {
42     this.addEventClick()
43   },
44   beforeDestroy() {
45     const elx = this.$refs.rightPanel
46     elx.remove()
47   },
48   methods: {
49     addEventClick() {
50       window.addEventListener('click', this.closeSidebar)
51     },
52     closeSidebar(evt) {
53       const parent = evt.target.closest('.el-drawer__body')
54       if (!parent) {
55         this.show = false
56         window.removeEventListener('click', this.closeSidebar)
57       }
58     }
59   }
60 }
61 </script>
62
63 <style lang="scss" scoped>
64 .rightPanel-background {
65   position: fixed;
66   top: 0;
67   left: 0;
68   opacity: 0;
69   transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
70   background: rgba(0, 0, 0, .2);
71   z-index: -1;
72 }
73
74 .rightPanel {
75   width: 100%;
76   max-width: 260px;
77   height: 100vh;
78   position: fixed;
79   top: 0;
80   right: 0;
81   box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
82   transition: all .25s cubic-bezier(.7, .3, .1, 1);
83   transform: translate(100%);
84   background: #fff;
85   z-index: 40000;
86 }
87
88 .handle-button {
89   width: 48px;
90   height: 48px;
91   position: absolute;
92   left: -48px;
93   text-align: center;
94   font-size: 24px;
95   border-radius: 6px 0 0 6px !important;
96   z-index: 0;
97   pointer-events: auto;
98   cursor: pointer;
99   color: #fff;
100   line-height: 48px;
101   i {
102     font-size: 24px;
103     line-height: 48px;
104   }
105 }
106 </style>