tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 全局代码格式化

Browse Source 
Former-commit-id: bb50c8419b8fcdeb48c93fce9f399d901e8f5a52
This commit is contained in:
郝先瑞
2022-05-04 15:02:33 +08:00
parent e563bc340c
commit 11f02c0254
136 changed files with 11147 additions and 9780 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
src/components/RightPanel/index.vue
View File

@@ -1,154 +1,163 @@
<template>
<div ref="rightPanel" :class="{ show: show }" class="rightPanel-container">
<div class="rightPanel-background" />
<div class="rightPanel">
<div class="handle-button" :style="{ 'top': buttonTop + 'px', 'background-color': theme }" @click="show = !show">
<Close style="width: 1em; height: 1em;vertical-align: middle " v-show="show" />
<Setting style="width:1em; height:1em;vertical-align: middle " v-show="!show" />
</div>
<div class="rightPanel-items">
<slot />
</div>
</div>
</div>
<div ref="rightPanel" :class="{ show: show }" class="rightPanel-container">
<div class="rightPanel-background" />
<div class="rightPanel">
<div
class="handle-button"
:style="{ top: buttonTop + 'px', 'background-color': theme }"
@click="show = !show"
>
<Close
style="width: 1em; height: 1em; vertical-align: middle"
v-show="show"
/>
<Setting
style="width: 1em; height: 1em; vertical-align: middle"
v-show="!show"
/>
</div>
<div class="rightPanel-items">
<slot />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { addClass, removeClass } from '@/utils/index'
import { addClass, removeClass } from '@/utils/index';
import useStore from "@/store";
import useStore from '@/store';
// 图标依赖
import { Close, Setting } from '@element-plus/icons-vue'
import { ElColorPicker } from "element-plus";
import { Close, Setting } from '@element-plus/icons-vue';
import { ElColorPicker } from 'element-plus';
const { setting } = useStore()
const { setting } = useStore();
const theme = computed(() => setting.theme)
const show = ref(false)
const theme = computed(() => setting.theme);
const show = ref(false);
defineProps({
buttonTop: {
default: 250,
type: Number
}
})
buttonTop: {
default: 250,
type: Number
}
});
watch(show, (value) => {
if (value) {
addEventClick()
}
if (value) {
addClass(document.body, 'showRightPanel')
} else {
removeClass(document.body, 'showRightPanel')
}
})
watch(show, value => {
if (value) {
addEventClick();
}
if (value) {
addClass(document.body, 'showRightPanel');
} else {
removeClass(document.body, 'showRightPanel');
}
});
function addEventClick() {
window.addEventListener('click', closeSidebar)
window.addEventListener('click', closeSidebar);
}
function closeSidebar(evt: any) {
// 主题选择点击不关闭
let parent = evt.target.closest('.theme-picker-dropdown');
if (parent) {
return;
}
// 主题选择点击不关闭
let parent = evt.target.closest('.theme-picker-dropdown')
if (parent) {
return
}
parent = evt.target.closest('.rightPanel')
if (!parent) {
show.value = false
window.removeEventListener('click', closeSidebar)
}
parent = evt.target.closest('.rightPanel');
if (!parent) {
show.value = false;
window.removeEventListener('click', closeSidebar);
}
}
const rightPanel = ref(ElColorPicker)
const rightPanel = ref(ElColorPicker);
function insertToBody() {
const elx = rightPanel.value as any
const body = document.querySelector('body') as any
body.insertBefore(elx, body.firstChild)
const elx = rightPanel.value as any;
const body = document.querySelector('body') as any;
body.insertBefore(elx, body.firstChild);
}
onMounted(() => {
insertToBody()
})
insertToBody();
});
onBeforeUnmount(() => {
const elx = rightPanel.value as any
elx.remove()
})
const elx = rightPanel.value as any;
elx.remove();
});
</script>
<style>
.showRightPanel {
overflow: hidden;
position: relative;
width: calc(100% - 15px);
overflow: hidden;
position: relative;
width: calc(100% - 15px);
}
</style>
<style lang="scss" scoped>
.rightPanel-background {
position: fixed;
top: 0;
left: 0;
opacity: 0;
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
background: rgba(0, 0, 0, .2);
z-index: -1;
position: fixed;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
background: rgba(0, 0, 0, 0.2);
z-index: -1;
}
.rightPanel {
width: 100%;
max-width: 260px;
height: 100vh;
position: fixed;
top: 0;
right: 0;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
transition: all .25s cubic-bezier(.7, .3, .1, 1);
transform: translate(100%);
background: #fff;
z-index: 40000;
width: 100%;
max-width: 260px;
height: 100vh;
position: fixed;
top: 0;
right: 0;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
transform: translate(100%);
background: #fff;
z-index: 40000;
}
.show {
transition: all .3s cubic-bezier(.7, .3, .1, 1);
transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
.rightPanel-background {
z-index: 20000;
opacity: 1;
width: 100%;
height: 100%;
}
.rightPanel-background {
z-index: 20000;
opacity: 1;
width: 100%;
height: 100%;
}
.rightPanel {
transform: translate(0);
}
.rightPanel {
transform: translate(0);
}
}
.handle-button {
width: 48px;
height: 48px;
position: absolute;
left: -48px;
text-align: center;
font-size: 24px;
border-radius: 6px 0 0 6px !important;
z-index: 0;
pointer-events: auto;
cursor: pointer;
color: #fff;
line-height: 48px;
width: 48px;
height: 48px;
position: absolute;
left: -48px;
text-align: center;
font-size: 24px;
border-radius: 6px 0 0 6px !important;
z-index: 0;
pointer-events: auto;
cursor: pointer;
color: #fff;
line-height: 48px;
i {
font-size: 24px;
line-height: 48px;
}
i {
font-size: 24px;
line-height: 48px;
}
}
</style>