wt_project_web_bak/src/layout/index.vue

<template>
  <div class="full-screen flex flex-justify-start">
    <el-container>
      <el-header class="header">
        <top @openMenu="show = true" />
      </el-header>
      <div class="flex" style="padding: 20px 20px; background-color: #f6f7f8">
        <el-aside style="width: 200px; position: fixed; left: 0" v-if="!mini">
          <left />
        </el-aside>
        <el-main class="wt-main hide-scrollbar" @scroll="scroll">
          <div class="wrapper">
            <router-view v-slot="{ Component, route }">
              <keep-alive :include="keepAlive.list">
                <component :is="Component" :key="route.fullPath" />
              </keep-alive>
            </router-view>
          </div>
        </el-main>
      </div>
    </el-container>
    <el-drawer v-model="show" direction="ltr" :with-header="false" :size="280">
      <div>
        <div class="padding-left flex flex-justify-start">
          <el-button icon="DArrowLeft" circle @click="show = false" />
        </div>
        <left />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import left from './left.vue'
import top from './top.vue'
import keepAliveStore from '../store/keepAlive.js'
import permissionStore from '@/store/permission.js'

export default {
  name: 'index.vue',
  components: { left, top },
  setup() {
    const keepAlive = keepAliveStore()
    const permission = permissionStore()
    return { keepAlive, permission }
  },
  data() {
    return {
      show: false,
      mini: false
    }
  },
  created() {
    this.keepAlive.$subscribe(res => {
      console.log(this.keepAlive.list)
    })
    this.getPermission()
  },
  mounted() {
    this.setScale()
    this.onresize = this.debounce(() => this.setScale(), 100)
    window.addEventListener('resize', this.onresize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.onresize)
  },
  methods: {
    getPermission() {
      this.$api.login.getPermission().then(res => {
        if (res.code === 200) {
          this.permission.cleanPermission()
          this.permission.addPermission(res.data)
        }
      })
    },
    scroll(event) {
      this.$bus.emit('scorll', event)
    },
    // 防抖
    debounce(fn, t) {
      const delay = t || 500
      let timer
      return function () {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const that = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(that, args)
        }, delay)
      }
    },

    // 设置缩放比例
    setScale() {
      const width = document.documentElement.clientWidth
      if (width < 1620) {
        this.mini = true
      } else {
        this.mini = false
      }
      this.$bus.emit('sizeChange', width)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  padding: 0;
}

.wt-main {
  width: 1200px;
  height: calc(100vh - 100px);
  background-color: #f6f7f8;
  overflow-x: hidden;
  padding: 0;
}

:deep(.el-drawer) {
  --el-drawer-bg-color: #f6f7f8;
}
</style>