lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Add elNamespace

Browse Source 
feat(component): Add namespace of class
This commit is contained in:
kailong321200875
2022-01-23 10:11:13 +08:00
parent e20fa76cad
commit d847ccb098
38 changed files with 507 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/layout/Layout.vue
View File

@@ -1,9 +1,14 @@
<script lang="tsx">
import { computed, defineComponent, unref } from 'vue'
import { useAppStore } from '@/store/modules/app'
// import { Backtop } from '@/components/Backtop'
import { Backtop } from '@/components/Backtop'
import { Setting } from '@/components/Setting'
import { useRenderLayout } from './components/useRenderLayout'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('layout')
const appStore = useAppStore()
@@ -42,7 +47,7 @@ export default defineComponent({
name: 'Layout',
setup() {
return () => (
<section class={['v-app', `v-app__${layout.value}`, 'w-[100%] h-[100%] relative']}>
<section class={[prefixCls, `${prefixCls}__${layout.value}`, 'w-[100%] h-[100%] relative']}>
{mobile.value && !collapse.value ? (
<div
class="absolute top-0 left-0 w-full h-full opacity-30 z-99 bg-[var(--el-color-black)]"
@@ -52,7 +57,7 @@ export default defineComponent({
{renderLayout()}
{/*<Backtop></Backtop>*/}
<Backtop></Backtop>
<Setting></Setting>
</section>
@@ -62,11 +67,7 @@ export default defineComponent({
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-app';
:deep(.@{namespace}-content) {
.el-scrollbar__view {
height: 100%;
}
:deep(.@{elNamespace}-scrollbar__view) {
height: 100% !important;
}
</style>

16
src/layout/components/AppView.vue
View File

@@ -22,17 +22,19 @@ const getCaches = computed((): string[] => {
<template>
<section
:class="[
'p-[var(--app-content-padding)] w-[100%]',
'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-contnet-bg-color)]',
{
'!min-h-[calc(100%-calc(var(--app-content-padding)*2))]':
fixedHeader && layout === 'classic' && footer,
'!min-h-[calc(100%-var(--tags-view-height)-var(--top-tool-height)-calc(var(--app-content-padding)*2))]':
'!min-h-[calc(100%-var(--app-footer-height))]':
fixedHeader && (layout === 'classic' || layout === 'topLeft') && footer,
'!min-h-[calc(100%-var(--tags-view-height)-var(--top-tool-height)-var(--app-footer-height))]':
((!fixedHeader && layout === 'classic') || layout === 'top') && footer,
'!min-h-[calc(100%-var(--tags-view-height))]':
fixedHeader && layout === 'topLeft' && footer,
'!min-h-[calc(100%-var(--tags-view-height)-calc(var(--app-content-padding)*2))]':
'!min-h-[calc(100%-var(--tags-view-height)-var(--app-footer-height))]':
!fixedHeader && layout === 'topLeft' && footer,
'!min-h-[calc(100%-var(--top-tool-height))]': fixedHeader && layout === 'cutMenu' && footer,
'!min-h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))]':
!fixedHeader && layout === 'cutMenu' && footer
}

7
src/layout/components/ToolHeader.vue
View File

@@ -7,6 +7,11 @@ import { UserInfo } from '@/components/UserInfo'
import { Screenfull } from '@/components/Screenfull'
import { Breadcrumb } from '@/components/Breadcrumb'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('tool-header')
const appStore = useAppStore()
@@ -34,7 +39,7 @@ export default defineComponent({
return () => (
<div
class={[
'v-tool-header',
prefixCls,
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
]}
>

17
src/layout/components/useRenderLayout.tsx
View File

@@ -7,6 +7,11 @@ import { Logo } from '@/components/Logo'
import AppView from './AppView.vue'
import ToolHeader from './ToolHeader.vue'
import { ElScrollbar } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('layout-content')
const appStore = useAppStore()
@@ -49,7 +54,7 @@ export const useRenderLayout = () => {
</div>
<div
class={[
'v-content',
prefixCls,
'absolute top-0 h-[100%]',
{
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
@@ -64,6 +69,7 @@ export const useRenderLayout = () => {
<ElScrollbar
v-loading={pageLoading.value}
class={[
`${prefixCls}-scrollbar`,
{
'!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
fixedHeader.value
@@ -109,7 +115,7 @@ export const useRenderLayout = () => {
<Menu class="!h-full"></Menu>
<div
class={[
'v-content',
prefixCls,
'h-[100%]',
{
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
@@ -123,6 +129,7 @@ export const useRenderLayout = () => {
<ElScrollbar
v-loading={pageLoading.value}
class={[
`${prefixCls}-scrollbar`,
{
'!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
fixedHeader.value && tagsView.value
@@ -161,10 +168,11 @@ export const useRenderLayout = () => {
<Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu>
<ToolHeader></ToolHeader>
</div>
<div class="v-content h-full w-full">
<div class={[prefixCls, 'v-content h-full w-full']}>
<ElScrollbar
v-loading={pageLoading.value}
class={[
`${prefixCls}-scrollbar`,
{
'mt-[var(--tags-view-height)]': fixedHeader.value
}
@@ -202,7 +210,7 @@ export const useRenderLayout = () => {
{/* <Menu class="!h-full"></Menu> */}
<div
class={[
'v-content',
prefixCls,
'h-[100%]',
{
'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]':
@@ -216,6 +224,7 @@ export const useRenderLayout = () => {
<ElScrollbar
v-loading={pageLoading.value}
class={[
`${prefixCls}-scrollbar`,
{
'!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
fixedHeader.value && tagsView.value