github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-27 19:29:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: performance optimization

Browse Source
This commit is contained in:
vben
2020-10-15 21:12:38 +08:00
parent 8f4d51a7cf
commit 70fba7ecac
15 changed files with 126 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/Drawer/src/BasicDrawer.tsx
View File

@@ -6,12 +6,12 @@ import {
watchEffect,
watch,
unref,
getCurrentInstance,
// getCurrentInstance,
nextTick,
toRaw,
} from 'vue';
import { BasicTitle } from '/@/components/Basic';
import { ScrollContainer, ScrollContainerOptions } from '/@/components/Container/index';
// import { ScrollContainer, ScrollContainerOptions } from '/@/components/Container/index';
import { FullLoading } from '/@/components/Loading/index';
import { getSlot } from '/@/utils/helper/tsxHelper';
@@ -35,16 +35,16 @@ export default defineComponent({
setup(props, { slots, emit, attrs }) {
// const { currentRoute } = useRouter();
const scrollRef = ref<any>(null);
/**
* @description: 获取配置ScrollContainer
*/
const getScrollOptions = computed(
(): ScrollContainerOptions => {
return {
...(props.scrollOptions as any),
};
}
);
// /**
// * @description: 获取配置ScrollContainer
// */
// const getScrollOptions = computed(
// (): ScrollContainerOptions => {
// return {
// ...(props.scrollOptions as any),
// };
// }
// );
const visibleRef = ref(false);
const propsRef = ref<Partial<DrawerProps> | null>(null);
@@ -95,33 +95,27 @@ export default defineComponent({
}
);
// watch(
// () => currentRoute.value.path,
// () => {
// if (unref(visibleRef)) {
// visibleRef.value = false;
// }
// function scrollBottom() {
// const scroll = unref(scrollRef);
// if (scroll) {
// scroll.scrollBottom();
// }
// );
function scrollBottom() {
const scroll = unref(scrollRef);
if (scroll) {
scroll.scrollBottom();
}
}
function scrollTo(to: number) {
const scroll = unref(scrollRef);
if (scroll) {
scroll.scrollTo(to);
}
}
function getScrollWrap() {
const scroll = unref(scrollRef);
if (scroll) {
return scroll.getScrollWrap();
}
return null;
}
// }
// function scrollTo(to: number) {
// const scroll = unref(scrollRef);
// if (scroll) {
// scroll.scrollTo(to);
// }
// }
// function getScrollWrap() {
// const scroll = unref(scrollRef);
// if (scroll) {
// return scroll.getScrollWrap();
// }
// return null;
// }
// 取消事件
async function onClose(e: any) {
const { closeFunc } = unref(getProps);
@@ -225,12 +219,12 @@ export default defineComponent({
);
}
const currentInstance = getCurrentInstance() as any;
if (getCurrentInstance()) {
currentInstance.scrollBottom = scrollBottom;
currentInstance.scrollTo = scrollTo;
currentInstance.getScrollWrap = getScrollWrap;
}
// const currentInstance = getCurrentInstance() as any;
// if (getCurrentInstance()) {
// currentInstance.scrollBottom = scrollBottom;
// currentInstance.scrollTo = scrollTo;
// currentInstance.getScrollWrap = getScrollWrap;
// }
const drawerInstance: DrawerInstance = {
setDrawerProps: setDrawerProps,
};
@@ -259,7 +253,7 @@ export default defineComponent({
class={[!unref(getProps).loading ? 'hidden' : '']}
tip="加载中..."
/>
<ScrollContainer
{/* <ScrollContainer
ref={scrollRef}
{...{ ...attrs, ...unref(getScrollOptions) }}
style={{
@@ -267,7 +261,19 @@ export default defineComponent({
}}
>
{() => getSlot(slots, 'default')}
</ScrollContainer>
</ScrollContainer> */}
<div
ref={scrollRef}
{...attrs}
style={{
height: `calc(100% - ${footerHeight}px)`,
overflow: 'auto',
padding: '16px',
paddingBottom: '30px',
}}
>
{getSlot(slots, 'default')}
</div>
{renderFooter()}
</>
),

2
src/components/Loading/FullLoading.vue
View File

@@ -42,7 +42,7 @@
width: 100%;
height: 100%;
// background: rgba(255, 255, 255, 0.3);
background: rgba(241, 241, 246, 0.8);
background: rgba(241, 241, 246, 0.7);
justify-content: center;
align-items: center;
}

19
src/components/Menu/src/index.less
View File

@@ -162,9 +162,9 @@
// 层级样式
&.ant-menu-dark {
.ant-menu-item {
transition: unset;
}
// .ant-menu-item {
// transition: unset;
// }
.ant-menu-item.ant-menu-item-selected.basic-menu-menu-item__level1,
.ant-menu-submenu-selected.basic-menu-menu-item__level1 {
@@ -206,9 +206,18 @@
}
.ant-menu-submenu-title {
height: @app-menu-item-height;
// margin: 0;
line-height: @app-menu-item-height;
// line-height: @app-menu-item-height;
display: flex;
height: @app-menu-item-height;
align-items: center;
}
&.ant-menu-inline-collapsed {
.ant-menu-item-selected {
background: unset !important;
box-shadow: none;
}
}
}